
スクロールした時に次の画面領域をぴたっと固定する「FSVS」
2015年2月12日jQueryプラグイン活用
「FSVS」はスクロールした時に次の画面領域をぴたっと固定してくれる、1ページの長いサイトを作る際に有効なjQueryプラグインです。矢印キーのキーボード操作にも対応しています。
以前紹介した、似たような効果を持つjQueryプラグインスクロール時に表示領域ぴったりにスナップさせることができる「jQuery.panelSnap Plugin」より、使用感は安定している気がします。
JavaScript
(function($){ $(function() { var fsvs = $.fn.fsvs({ speed : 500, bodyID : 'fsvs-body', selector : '> .section', mouseSwipeDisance : 40, afterSlide : function(){}, beforeSlide : function(){}, endSlide : function(){}, mouseWheelEvents : true, mouseDragEvents : true, touchEvents : true, arrowKeyEvents : true, pagination : true, nthClasses : false, detectHash : true }); }); })(jQuery);
HTML
<html class="fsvs"> <body> <div id="fsvs-body"> <div class="section" id="section01"><p>section01</p></div> <div class="section" id="section02"><p>section02</p></div> <div class="section" id="section03"><p>section03</p></div> </div> </body> </html>
CSS
html { height: 100%; width: 100%; position: fixed; top: 0; left: 0; overflow: hidden; } #fsvs-body { -webkit-backface-visibility: hidden; -webkit-perspective: 1000; position: absolute; top: 0; left: 0; z-index: 1; height: 100%; width: 100%; } .section { display: table; height: 100%; width: 100%; overflow: hidden; font-size: 100px; color: #ffffff; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .section p { display: table-cell; vertical-align: middle; text-align: center; } #section01 { background-color: #ffbc30;} #section02 { background-color: #ff9130; } #section03 { background-color: #f3d52d; } #fsvs-pagination { margin: 0; padding: 8px 4px; position: fixed; height: auto; right: -100px; top: 50%; z-index: 999; width: 32px; } #fsvs-pagination li { list-style: none; width: 25px; height: 25px; line-height: 25px; text-align: center; margin: 5px 0; cursor: pointer; } #fsvs-pagination li > span { border-radius: 100%; width: 22px; height: 22px; line-height: 22px; border: 1px solid white; display: block; } #fsvs-pagination li > span > span { border-radius: 100%; width: 12px; height: 12px; line-height: 12px; border: 1px solid white; display: block; margin: 4px; } #fsvs-pagination li.active > span { border: 1px dashed white; } #fsvs-pagination li.active > span > span { background: white; } #fsvs-pagination li:last-child { margin: 0; }