今日の人気記事

  1. Web上でプレゼンテーションを「LocalScroll」 - jQueryプラグイン
  2. 指定した要素の高さや横幅にアニメ効果を「CSS Animate Auto」

パネル型のスクロールをページ内に設置「panelSnap」

当ページのリンクには広告が含まれています。

スポンサーリンク

パネル型のスクロールをページ内に設置することのできるプラグイン「panelSnap」を紹介します。

jQueryプラグイン「panelSnap」

このプラグインを使えば、ページスクロール(1ページごとのちょうどいい位置にスクロール)することのできるパネルを設置することができます。

また、シングルページのスクロールにも対応しているので、おすすめプラグインです!

スポンサーリンク

それではデモページをスクロールしてみてください。

「panelSnap」のデモ

デモのソース(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>
スポンサーリンク

関連記事(一部広告含む)