웹솔루션개발 22년 노하우! 해피CGI의 모든것

[해피CGI][cgimall] jquery scroll path Ver1.1.1 본문

웹프로그램밍 자료실/JAVA 자료

[해피CGI][cgimall] jquery scroll path Ver1.1.1

해피CGI윤실장 2017. 2. 15. 09:32

* jquery scroll path

- 패럴렉스 효과, 스크롤을 할때 효과를 살릴 수 있는 jquery scroll path
레이아웃을 보면 패럴랙스로 구성되어 있어 각 섹션별로 지정하는 형태
레이어 이동을 지정하여 움직일 수 있음



* License

- MIT License




* 기능

- jquery 1.7 이상 필요
- 스크롤, 마우스 휠 위/아래 화살표 키 및 스페이스 바를 사용하여 이동가능
- 스페이스 바를 화살표 키보다 빠르게 스크롤하고 스페이스를 누른 상태에서 Shift 키를 누르면 뒤로 스크롤 됨
- 스크롤 및 클릭을 허용하는 사용자 스크롤바 포함



* 코드구성


기본 css 와 script , 책갈피 지정과 관련 스크립트 및 멘트로 구성되있으며
script/demo.js 에서 움직임에 대한 스크립트의 샘플에 대한 코드가 정의가 되어있습니다


상단 css, script 호출부분





스크롤에 따른 움직임을 보여줘야되는 영영선언과 텍스트






하단 스크립트 호출부분





변형하여 적용하시기 위해서는 script/demo.js 파일을
그대로 활용하여 코드를 코치거나 새로 js 파일을 만들거나 script 를 선언하여
html 문서에서 활용을 하면 좋을것으로 생각됩니다





홈페이지바로가기 

Comments