[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js

サイト構築 -JavaScript

Post on:2014年1月27日

scrollReveal.jsのデモ

デモでは、ページ内の各要素がビューポートに表示される時にアニメーションで表示されます。

デモページ

デモページの各要素はシンプルなので、ゆっくりスクロールすると、各要素の動きが異なっているのがよく分かると思います。
下記は、デモをアニメーションgifにしたものです。

デモのアニメーション

scrollReveal.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして</body>の上あたりに記述します。
jQueryなど他のスクリプトは必要ありません。

<body>
  ...
  ...
  <script src="js/scrollReveal.js"></script>
</body>

Step 2: HTML

スクリプトをセットしたら、あとはアニメーションで表示させる要素に「data-scrollreveal」を追加するだけです。

<h1 data-scrollreveal>見出しはアニメーションで表示</h1>

表示させる要素とさせない要素を混在することも可能です。

<h1>見出しは通常通りに表示</h1>

<p data-scrollreveal>パラグラフはアニメーションで表示</p>

<button data-scrollreveal>ボタンはアニメーションで表示</button>

さらに、アニメーションさせる要素のタイミングや動きを個別に設定することもできます。

<!-- Eg. 3.1 — These 2 lines are equivalent -->
<div data-scrollreveal="enter top move 25px"> Example 1 </div>
<div data-scrollreveal="enter from the top and then move 25px"> Example 1 </div>

<!-- Eg. 3.2 — These 3 lines are equivalent -->
<div data-scrollreveal="enter left move 80px over 0.66s but then wait 3s"> Example 2 </div>
<div data-scrollreveal="over 0.66s move 80px but wait 3s and enter from the left"> Example 2 </div>
<div data-scrollreveal="after 3s, enter left and move 80px over 0.66s"> Example 2 </div>

設定項目は、4つです。
組み合わせるといろいろなことができそうですね。