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

スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。

サイトのキャプチャ

scrollReveal.js
scrollReveal.js -GitHub

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つです。
組み合わせるといろいろなことができそうですね。

enter
移行の方向(enter top, enter right, enter bottom, enter left)
move
移行の距離(move 100px)
over
移行の時間(over 1.0s)
after/wait
移行のタイミング(after 1s, wait 1s)

また、キーワードを使って、さらに複雑な設定も可能です。

  • from
  • the
  • and
  • then
  • but

top of page

©2017 coliss