jQuery

【jQuery】フルスクリーン1ページのスクロール遷移させるプラグイン。FSVS

October 23, 2014

以前話題になったiphone5sのプロダクトページのように1つのコンテンツをフルスクリーン表示させて、スクロールや矢印キー、右側のナビゲーションボタンで垂直方向に配置したコンテンツへ遷移させるプラグイン。

HTML

<!doctype html>
<html class="fsvs" lang="en">
    <head>
        <link href="assets/css/style.css" media="all" rel="stylesheet" type="text/css" />
        <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
        <script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
        <script src="assets/js/bundle.js"></script>
    </head>
    <body>
        <div id="fsvs-body">
            <div class="slide"></div>
            <div class="slide"></div>
            <div class="slide"></div>
        </div>
    </body>
</html>

オプション

$(document).ready( function() {
    var slider = $.fn.fsvs({
        speed : 5000,
        bodyID : 'fsvs-body',
        selector : '> .slide',
        mouseSwipeDisance : 40,
        afterSlide : function(){},
        beforeSlide : function(){},
        endSlide : function(){},
        mouseWheelEvents : true,
        mouseWheelDelay : false,
        scrollableArea : 'scrollable',
        mouseDragEvents : true,
        touchEvents : true,
        arrowKeyEvents : true,
        pagination : true,
        nthClasses : false,
        detectHash : true
    });
    //slider.slideUp();
    //slider.slideDown();
    //slider.slideToIndex( index );
    //slider.unbind();
    //slider.rebind();
  endSlide : function(index) {
			$('<div class="slide"><h2>Slide ' + (index+2) + '</h2></div>').appendTo( $('body') );
			// reset the nth classes if you need it
			slider.nthClasses(3);
			// rebind pagination if you need it
			slider.addPagination();
		}
		...
	});
});

MIT
Demo/Download