パネル型のスクロールをページ内に設置「panelSnap」
当ページのリンクには広告が含まれています。
スポンサーリンク
パネル型のスクロールをページ内に設置することのできるプラグイン「panelSnap」を紹介します。
jQueryプラグイン「panelSnap」
このプラグインを使えば、ページスクロール（1ページごとのちょうどいい位置にスクロール）することのできるパネルを設置することができます。
また、シングルページのスクロールにも対応しているので、おすすめプラグインです！
スポンサーリンク
それではデモページをスクロールしてみてください。
デモのソース（HTML + jQuery）
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="panelSnap のデモでーす。">
<title>panelSnap - jQueryプラグイン</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
section {
position: relative;
overflow: hidden;
padding: 50px;
width: 100%;
height: 100%;
}
section:nth-child(2n+1) {
background: blue;
}
section:nth-child(2n) {
background: red;
}
.panels {
position: absolute;
top: 200px;
bottom: 200px;
right: 200px;
left: 200px;
overflow: scroll;
}
</style>
</head>
<body>
<h1>panelSnap のデモでーす。</h1>
<p>
<div class="panels">
<section data-panel="first">
<h2>パネル①</h2>
</section>
<section data-panel="second">
<h2>パネル②</h2>
</section>
<section data-panel="third">
<h2>パネル③</h2>
</section>
</div>
</section>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="jquery.panelSnap.js"></script>
<script>
jQuery(function($) {
$('.panels').panelSnap({
$menu: $('.menu_demo .menu')
});
});
</script>
</body>
</html>
スポンサーリンク