[JS]実装は簡単でスマフォにも対応、縦長ページをスクロールする時にちょうどいい位置にスナップさせるスクリプト -Scrollify

Post on:2014年6月16日

section要素やdiv要素でパネルを垂直に配置した縦長ページをスクロールする時に、各パネルをちょうどいい位置にスナップさせるjQueryのプラグインを紹介します。

デスクトップのホイール操作、スマフォやタブレットなどのタッチ操作にも対応しています。

サイトのキャプチャ

Scrollify
Scrollify -GitHub

Scrollifyのデモ

デモはデスクトップ用のモダンブラウザ、スマフォ・タブレットなどでご覧ください。

サイトのキャプチャ

デモページ

デスクトップなので、ホイールで少しスクロールしてみます。

サイトのキャプチャ

少しだけスクロール

スクロールを途中で止めると、次のパネルがちょうどよく表示されるように自動でスクロールします。

サイトのキャプチャ

ちょうどいい位置に自動でスクロール

スクロールはイージングやバウンドなど、さまざまなエフェクトが利用できます。

Scrollifyの使い方

Step 1: 外部ファイル

当スクリプトとjquery.jsとeasing.jsを</body>の上あたりに記述します。
jQueryは1.6+で、どれでも可です。

<body>
  ...
  <script src="script/jquery-1.6.js"></script>
  <!--<script src="script/jquery-2.1.1.js"></script>-->
  <!--<script src="script/jquery-1.11.1.js"></script>-->
  <script src="script/jquery.easing.1.3.js"></script>
  <script src="script/scrollify.min.js"></script>
</body>

Step 2: HTML

各パネルは同じ要素（sectionやdivなど）で実装します。

<body>
  <section>パネル 1</section>
  <section>パネル 2</section>
  <section>パネル 3</section>
</body>

Step 3: JavaScript

各パネルに使用した要素を指定し、スクリプトを実行します。

 <script>
  $(function() {
    $.scrollify({
      section : "section",
    });
  });
</script>

オプションでは、アニメーションのエフェクト、スピード、位置調整などを設定できます。

$.scrollify({
        section : "section",
        sectionName : "section-name",
        easing: "easeOutExpo",
        scrollSpeed: 1100,
        offset : 0,
        scrollbars: true,
        before:function() {},
        after:function() {}
    });

sponsors

top of page

©2024 coliss