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

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

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();
}
...
});
});
 
fsvs

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

  • LATEST
  • RELATED
  • POPULAR