NAKAZI LAB.(ナカジラボ)

Webサイト制作を円滑にすることを目的とした、cssやJavaScript(jQuery)の小技備忘録サイトです。

スクロール時に表示領域ぴったりにスナップさせることができる「jQuery.panelSnap Plugin」

2014年1月10日jQueryプラグイン活用

スクロール時に表示領域ぴったりにスナップさせることができる「jQuery.panelSnap Plugin」

次のセクションへスクロールして送る時にピタっと表示領域で止めてくれます。全画面サイトを作る場面で役立ちそうです。

デモページ

JavaScript

<script src="jquery.customEvents.js"></script>
<script src="jquery.panelSnap.js"></script>
<script>
(function($){
	$(function(){	
		$('body').panelSnap({
			$menu: $('#mainNav'),
			menuSelector: 'a',
			panelSelector: '.section',
			directionThreshold: 60,
			slideSpeed: 400
		});
	});	
})(jQuery);
</script>

HTML

<nav id="mainNav">
	<ul>
		<li><a href="#" data-panel="section01" class="active">section01</a></li>
		<li><a href="#" data-panel="section02">section02</a></li>
		<li><a href="#" data-panel="section03">section03</a></li>
	</ul>
</nav>

<div class="section" id="section01" data-panel="section01"><p>section01</p></div>
<div class="section" id="section02" data-panel="section02"><p>section02</p></div>
<div class="section" id="section03" data-panel="section03"><p>section03</p></div>

CSS

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
.section {
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
	font-size: 100px;
	color: #ffffff;
	display: table;
	text-transform: uppercase;
}
.section p {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#section01 { background-color: #ffbc30;}
#section02 { background-color: #ff9130; }
#section03 { background-color: #f3d52d; }
#mainNav {
	position: fixed;
	z-index: 9999;
	top: 50%;
	right: 30px;
	margin-top: -40px;
}
#mainNav li {
	margin-bottom: 20px;
}
#mainNav a {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 12px;
	text-indent: 100%;
	overflow: hidden;
	background-color: #ffffff;
	-webkit-transition: .2s ease-in-out;
	-moz-transition: .2s ease-in-out;
	-o-transition: .2s ease-in-out;
	-webkit-transform: scale(1, 1);
	-moz-transform: scale(1, 1);
}
#mainNav a.active,
#mainNav a:hover {
	-webkit-transform: scale(1.5, 1.5);
	-moz-transform: scale(1.5, 1.5);
}

デモページ

  • ̃Gg[͂ĂȃubN}[Nɒlj

関連記事

  1. スクロール時に表示領域ぴったりにスナップさせることができる「jQuery.panelSnap Plugin」

更新情報をチェックする

rss feedly twitter facebook

今週の人気記事TOP10

サイト内検索

中の人

nakazi

Web関係のお仕事をしてます。効率化が大好きです。当サイトの更新情報やWeb制作に関する事を@nakazilabでつぶやいています。

連絡先

nakazilab[atmark]gmail.com