[JS]スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll

スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQueryのプラグインを紹介します。

こういうちょっとしたエフェクトって、楽しいですね。

Smooth scrolling effect á la Google
pullupScroll -GitHub

• pullupScrollのデモ
• pullupScrollの使い方

pullupScrollのデモ

実際の動作は、下記のデモページで楽しむことができます。

デモページ

デモの動きだけでなく、左上のアイコンに3種類のエフェクトが仕込まれていて、面白いです。

pullupScrollの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプトを外部ファイルとして記述します。

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/equal-height-columns.js"></script>

Step 2: HTML

引っ張り上げる各エレメントにclassを付与し、それらを内包するラッパーを配置します。

<div id="content">
  <section class="box">section</section>
  <section class="box">section</section>
  <section class="box">section</section>
  <section class="box">section</section>
</div>

Step 3: JavaScript

適用する範囲（ラッパー）と適用する要素をjQueryのセレクタで指定し、スクリプトを実行します。

$("#content").pullupScroll('.box');