ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 패럴랙스 스크롤링
    HTML 2023. 4. 4. 02:25

    웹사이트에서 사용되는 기술로 스크롤에 따라 오브젝트와 배경 이미지가 시간차를 두고 변하는 기법.

     

    패럭렉스 스크롤링의 장점

    • 콘텐츠 탐색 간편하게 해줄 수 있다.
    • 스크롤에 따라 3D효과와 깊이감을 제공해 사용자 인터렉션을 높이고 호기심 자극해 사이트에 머무는 시간을 늘린다.
    • 느리고 무거운 플래시 대체해 HTML5, CSS3를 활용해 제작 가능하다.

     

    패럭렉스 스크롤링 적용 팁

    • 모바일 환경 고려. (각 디바이스에서 활용 가능한 반응형 웹 구축)
    • 패럭렉스 스크롤링이 사이트 제작 동기가 되어서는 안된다. (사용자에게 색다른 경험을 제공하는 한가지 요소일 뿐이다.)
    • 재미있게 만들자.
    • 스토리를 만들자. (주로 회사, 제품 연혁을 웹사이트에 담고자 할 때 사용하는 방식, 콘텐츠의 타임라인이나 스토리 경험하게 할 수 있다.)
    • 연결성 부여하자. (궁금증을 끊임없이 유발해 사이트에 오래 머물게 하기 위한 매끄러운 연결성 필요하다.)
    • 사용자의 다음 행동 안내하자. (스크롤 진행부에 화살표 등의 가이드를 준다.)
    • Layer와 Depth를 추가하라. (스크롤에 따른 Layer의 노출 값을 달리 적용해 풍부한 깊이감과 인터렉션 효과를 준다.)
    • 과한 사용 금물.
    • 로딩 애니메이션 (대용량 이미지를 기반으로 하기 때문에 로딩이 필요할 경우 로딩화면을 제공한다.)

    'HTML' 카테고리의 다른 글

    Semantic Markup  (0) 2023.03.28

    댓글

heeezzang Tistory.