[해피CGI][cgimall] One Page Scroll With Slider Wheel Indicator

페이지 섹션 사이를 전환하면서 표시기가 휠 라운드의 원 안에 이동하는 휠 슬라이더가 있는

독창적 인 한 페이지 스크롤 웹 사이트 를 만드는 jQuery / CSS 솔루션 입니다.

최신 Bootstrap 프레임 워크와 호환되며 Bootstrap의 scrollspy 구성 요소가 필요합니다.

​

​원 페이지용 웹사이트를 제작할 때 사용하면 괜찮을 듯 합니다.

다운로드 받은 파일의 압축을 해제하고,
slider-wheel.html 파일을 웹브라우저로 열어보면
데모 확인이 가능합니다.

 

 

 

 

마우스 휠이나, 키보드 방향키를 이용해서
웹페이지의 스크롤을 위,아래로 조절을 하면
웹페이지의 배경이 스크롤에 따라서 변경이 됩니다.

중앙에 동그란 부분에 표시되는 컨텐츠가,
스크롤의 위치에 해당하는 컨텐츠로 교체가 됩니다.

 

 

 

동그란 이미지 주변의 하얀색 원을 클릭하면
해당 스크롤의 위치로 바로 이동도 되네요.


slider-wheel.html 파일의 소스코드를 열어서 보니,
각각의 슬라이드 별로 주석을 달아놔두었네요.
원페이지용 웹사이트를 제작할 때 도움이 되지 않을까 싶습니다.