출처 : 위키피디아
Parallax Scroll(패럴렉스 스크롤)은 위 움짤처럼 페이지를 스크롤 할 때 페이지와 배경 이미지 간 시차를 만들어서 움직이는듯한 느낌을 주는 것을 일컫습니다.
웹 페이지에 적용하기 위해 간단한 스크립트를 제작해봤습니다.
라이브 데모 & 설명서 : https://marshall-ku.github.io/Parallax-Scroll/
깃허브 : https://github.com/marshall-ku/Parallax-Scroll
일전에 소개한 모바일 기기에서 background-attachment:fixed를 사용하는 방법(링크)와 함께 사용해, 모바일에서도 PC와 똑같이 동작하도록 했습니다.
위 사진처럼 요소의 크기를 class 하나로 변경하실 수 있고, 이미지의 추가나 이미지에 타이틀을 추가하거나 스크롤 속도를 변경하는 커스터마이징도 설명서만 확인하시면 간단하게 적용하실 수 있도록 제작했습니다.
