일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- 쇼핑몰
- CSS
- 해피CGI
- #웹솔루션
- #cgimall
- CGIMALL
- #jQuery
- 해피씨지아이
- php
- #해피CGI
- 사이트제작
- #CSS
- #뉴스
- #홈페이지제작
- 홈페이지
- #쇼핑몰
- 웹솔루션
- #업종별
- 홈페이지제작
- jquery
- #동영상
- 솔루션
- 게시판
- #홈페이지
- #솔루션
- #happycgi
- #이미지
- #image
- javascript
- happycgi
- Today
- Total
웹솔루션개발 22년 노하우! 해피CGI의 모든것
[해피CGI][cgimall] One Page Scroll With Slider Wheel Indicator 본문
웹프로그램밍 자료실/JAVA 자료
[해피CGI][cgimall] One Page Scroll With Slider Wheel Indicator
해피CGI윤실장 2020. 6. 25. 09:17페이지 섹션 사이를 전환하면서 표시기가 휠 라운드의 원 안에 이동하는 휠 슬라이더가 있는
독창적 인 한 페이지 스크롤 웹 사이트 를 만드는 jQuery / CSS 솔루션 입니다.
최신 Bootstrap 프레임 워크와 호환되며 Bootstrap의 scrollspy 구성 요소가 필요합니다.
원 페이지용 웹사이트를 제작할 때 사용하면 괜찮을 듯 합니다.
다운로드 받은 파일의 압축을 해제하고,
slider-wheel.html 파일을 웹브라우저로 열어보면
데모 확인이 가능합니다.
마우스 휠이나, 키보드 방향키를 이용해서
웹페이지의 스크롤을 위,아래로 조절을 하면
웹페이지의 배경이 스크롤에 따라서 변경이 됩니다.
중앙에 동그란 부분에 표시되는 컨텐츠가,
스크롤의 위치에 해당하는 컨텐츠로 교체가 됩니다.
동그란 이미지 주변의 하얀색 원을 클릭하면
해당 스크롤의 위치로 바로 이동도 되네요.
slider-wheel.html 파일의 소스코드를 열어서 보니,
각각의 슬라이드 별로 주석을 달아놔두었네요.
원페이지용 웹사이트를 제작할 때 도움이 되지 않을까 싶습니다.
'웹프로그램밍 자료실 > JAVA 자료' 카테고리의 다른 글
[해피CGI][cgimall] Revealing Hero Effect with CSS & JavaScript (0) | 2020.07.02 |
---|---|
[해피CGI][cgimall] Infinitely Scrollable Vertical Menu (0) | 2020.07.01 |
[해피CGI][cgimall] 반응형 슬라이드 플러그인 OwlCarousel2 (0) | 2020.06.15 |
[해피CGI][cgimall] jQuery 를 이용한 Zoom Image (0) | 2020.06.10 |
[해피CGI][cgimall] jQuery 를 이용한 popModal (0) | 2020.06.09 |
Comments