mousewheel event
마우스 휠을 이용한 인터랙션이다.
원페이지형식에 응용하였으며 휠을 내리거나 올릴때 하나의 화면이 통으로 슬라이드 되도록 하였다.
javascript
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 | var win_h = $(window).height(); $('.section').each(function(index){ $(this).attr("data-index",win_h * index); }); $('.section').on("mousewheel",function(e){ var sectionPos = parseInt($(this).attr("data-index")); if(e.originalEvent.wheelDelta >= 0) { $("html,body").stop().animate({scrollTop:sectionPos - win_h}); return false; } else if (e.originalEvent.wheelDelta < 0) { $("html,body").stop().animate({scrollTop:sectionPos + win_h}); return false; } }); | cs |
html
1 2 3 4 5 | <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> <div class="section"></div> | cs |
각 섹션이 마우스휠할때마다 보여지는 각각의 전체화면이며 CSS로 전체뷰가 보이도록 한다.
jquery.mousewheel.min.js위 파일을 <head> 부분에 추가해준다.
1 | <script src="js/jquery.mousewheel.min.js"></script> | cs |
'퍼블리싱 > TIP' 카테고리의 다른 글
| 안드로이드 어플 다운로드 할 수 있는 페이지 링크걸기 (0) | 2016.01.27 |
|---|---|
| 크롬에서 닫은 탭 다시열기 (0) | 2016.01.18 |
| 이미지 슬라이드 (0) | 2016.01.14 |
| isScrolledView moveUp 차례대로 효과주기 (0) | 2016.01.14 |
| scrollTop값을 이용한 엘리먼트 움직이는 효과 (0) | 2016.01.13 |
