동영상이 재생되는 듯한 스크롤 이펙트 패럴랙스 사이트 5
애플의 신제품 홍보 페이지에서의 동영상과 같은 화려한 스크롤 인터랙션을 많이 경험해보셨을텐데요,
웹 프론트엔드 개발을 디자인과 결합하는 영역의 선구자라고도 할 수 있는 애플의 이러한 인터랙션 디자인은 최근 국내외 사이트에서 많은 적용 사례를 확인해볼 수 있습니다.
이제는 웹디자인 트렌드에서 빠질 수 없는 기술과 디자인의 결합이라고도 할 수 있습니다. 고도의 개발 기술을 요하는 인터랙션 디자인 예제를 가득 확인할 수 있는 멋진 사이트 5가지의 사례를 준비했습니다.
스크롤을 내릴수록 마치 한 편의 동영상이 재생되는 듯한 화려한 인터랙션을 확인할 수 있는 스크롤 이펙트 패럴랙스 디자인의 사이트를 소개합니다.
1. FLOEMA
floema 주얼리 브랜드 사이트는 배경에서 자동재생되는 콘텐츠들과 부드러운 인터랙션으로 스크롤을 하지 않아도 클릭 시 재생되는 효과들 만으로도 한편의 CF영상을 보는 듯한 디자인이 연출되고 있습니다.
2. vitaarchitecture
vararchitecture 사이트에서 역시 자동 재생되는 백그라운드와 함께 좌우로 텍스트가 흐르는 효과를 시작으로 하단 스크롤 시 콘텐츠가 떠오르는 floating 효과와 다양한 인터랙션이 나타납니다.
마우스 오버 hover효과와 라인 드로잉 효과 등을 통해 사이트 탐색에 UX적인 즐거움을 줍니다.
3. Priestress
전반적인 브랜딩도 멋지고 모든 페이지를 스크롤 이펙트를 활용한 디자인의 priestress 소개 사이트입니다.
스토리텔링 기반으로 콘텐츠가 구성되어 마치 연대기를 읽는 듯한 느낌도 드는 디자인과 인터랙션입니다. 모든 페이지와 전반적인 구성을 참고하면 좋은 사례입니다.
4. poltronaprau
poltronafrau 사이트의 주요 콘텐츠는 동영상이지만, 메뉴를 클릭하면 배경에서는 그대로 동영상이 재생되고 있는 중에 투명한 레이어 위로 펼쳐지는 메뉴의 레이아웃이 눈여겨볼만 합니다.
동영상을 중심으로 다른 메뉴로 이동할 때에도 단순히 fade in-out 되는 페이지 이동이 아닌, 위아래로 레이어가 등장하며 페이지가 변환되기 까지의 자동 인터랙션이 애니메이션으로 흘러갑니다.
각 클릭요소에 반응하는 hover 효과가 다양하면서도 매우 자연스러워 디테일이 좋은 디자인이라 할 수 있습니다.
5. COLORS COMBINATION
한 디자인 에이전시에서 제작한 컬러 색조합 제안 디자인 사이트입니다.
추천 컬러별로 색조합과 다양한 컨텐츠에 활용된 사례 등을 전체 사이트 무드를 카메라 렌즈를 통해 들여다보는 듯한 UX로 구현하였습니다. 스크롤을 내리면 전체 컬러별 배색 조합과 포트폴리오 이미지를 한번에 볼 수 있으며, 스크롤의 끝에 다다르면 재미있는 아이디어를 확인할 수 있습니다.
스크롤 끝에 무엇이 숨어있는지 확인해보고 싶으시다면 사이트를 방문하여 탐색해보세요.
🔍 dbre 디자인 에이전시를 운영하며 youtube와 블로그 콘텐츠를 통해 디자인 트렌드와 방법론, 퍼블리싱 팁을 소개하고 있습니다.
dbre.agency@gmail.com
'Design Trend' 카테고리의 다른 글
| [디자인트렌드] 웹디자인 트렌드 참고할만한 사이트 5 (0) | 2022.03.31 |
|---|---|
| [디자인트렌드] 프로페셔널해 보이는 웹디자인을 위한 부가적 요소 4가지 (0) | 2022.02.23 |
| [디자인트렌드] behance 국가별 최신 디자인 트렌드 확인하는 방법 (0) | 2022.02.17 |
| 2022 웹디자인 트렌드 - 탑 명품 브랜드 5 웹사이트 뜯어보기 (0) | 2022.02.08 |
| 웹디자인 포트폴리오 제작에 유용한 웹화면 녹화 gif 만들기 - 윈도우 화면 녹화 (2) | 2022.01.28 |
