-
웹사이트에서 사용되는 기술로 스크롤에 따라 오브젝트와 배경 이미지가 시간차를 두고 변하는 기법.
패럭렉스 스크롤링의 장점
- 콘텐츠 탐색 간편하게 해줄 수 있다.
- 스크롤에 따라 3D효과와 깊이감을 제공해 사용자 인터렉션을 높이고 호기심 자극해 사이트에 머무는 시간을 늘린다.
- 느리고 무거운 플래시 대체해 HTML5, CSS3를 활용해 제작 가능하다.
패럭렉스 스크롤링 적용 팁
- 모바일 환경 고려. (각 디바이스에서 활용 가능한 반응형 웹 구축)
- 패럭렉스 스크롤링이 사이트 제작 동기가 되어서는 안된다. (사용자에게 색다른 경험을 제공하는 한가지 요소일 뿐이다.)
- 재미있게 만들자.
- 스토리를 만들자. (주로 회사, 제품 연혁을 웹사이트에 담고자 할 때 사용하는 방식, 콘텐츠의 타임라인이나 스토리 경험하게 할 수 있다.)
- 연결성 부여하자. (궁금증을 끊임없이 유발해 사이트에 오래 머물게 하기 위한 매끄러운 연결성 필요하다.)
- 사용자의 다음 행동 안내하자. (스크롤 진행부에 화살표 등의 가이드를 준다.)
- Layer와 Depth를 추가하라. (스크롤에 따른 Layer의 노출 값을 달리 적용해 풍부한 깊이감과 인터렉션 효과를 준다.)
- 과한 사용 금물.
- 로딩 애니메이션 (대용량 이미지를 기반으로 하기 때문에 로딩이 필요할 경우 로딩화면을 제공한다.)
'HTML' 카테고리의 다른 글
Semantic Markup (0) 2023.03.28