スクロールした時に次の画面領域をぴたっと固定する「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;
}