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 |
