JavaScriptのScrollRevealを使ったスクロールアニメーション

JavaScriptのイラスト

せっかく、ページに訪れてくれたユーザーに楽しく最後まで見てもらえるよう、アニメーションを使います。

このアニメーションをつける場合jQueryをよく使いますが、JavaScriptのScrollRevealは、必要な記述が少なく、オプションを指定することで様々な動きが可能なのでかなり重宝しています。

この記事は、そんなScrollRevealについて、

  • ScrollRevealとは?
  • ScrollRevealで使えるオプション一覧
  • 10種類の実装サンプル

の内容です。

非常に簡単にアニメーションをつけることができるので、是非参考にしてみてください。

ScrollRevealとは

ScrollRevealは、Webページの画面をスクロールした際、画像やテキスト等の任意で指定した要素をアニメーションさせながら表示するスクリプトです。

一例だと、以下のようなアニメーションが簡単にできます。

このサンプルのように、「ふわっと表示」をはじめ、「下から表示」「遅れて表示」など、それらをオプションと言われる簡単な記述で指定して実装することができます。

ScrollRevealの実装手順と使い方

ScrollRevealの実装手順と使い方についてです。

JavaScriptライブラリの読み込み

ScrollRevealを導入するには、「scrollreveal.min.js」が必要です。

unpkgのCDNで配信されているので、以下のどちらかを</body>のすぐ上に記述して読み込みましょう。

HTML

// 常に最新のバージョンで使いたい場合 ※推奨
<script src="https://unpkg.com/scrollreveal"></script>

// バージョン指定のminファイル
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>

使い方は簡単で、ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。

アニメーションをさせた要素にclassを与える

ScrollRevealのファイルを</body> の上に記述したら、次にどのclassをアニメーションさせるかを指定します。

以下は一例で .test のclassを付与しています。このように、アニメーションをさせたい要素にclassを付与します。

HTML

<div class="test">これはテストです</div>

scriptで指定

上記で動かしたい要素のclassを、scriptで以下のように指定して、</body> の上に記述したScrollRevealのファイルの後(※</body> よりは前)に記述します。

HTML

ScrollReveal().reveal('.test', { 
// ここにオプションを記述
});

これで基本的な記述は完了です。

かかかず
かかかず

これで準備は完了です。あとは「どのように動かす?」のアニメーション指定の「オプション」について解説していきます。

オプションの実装例10個

ScrollRevealには、動きを細かく指定できるオプションが用意されています。

利用できるオプションは、以下の公式サイトから一覧で見ることができます。

公式サイト ScrollReveal

よく使うオプションを抜粋すると、以下の通りです。

オプション内容
origintop/right/bottom/leftどの方向からスライドインさせるか?
distancepx/em/%動く距離を指定
scale0〜 の数値 (1.5 等)拡大・縮小の大きさ
rotate0〜 の数値 (300 等)回転
delayミリ秒単位の時間アニメーションが実行されるまでの時間
durationミリ秒単位の時間アニメーションの完了にかかる時間
delayミリ秒単位の時間アニメーションが実行されるまでの時間
intervalミリ秒単位の時間各公開間の時間
opacity0~1表示される前の不透明度
desktoptrue(有効)/false(無効)デスクトップでアニメーションを有効/無効
mobiletrue(有効)/false(無効)モバイルでアニメーションを有効/無効
resettrue(有効)/false(無効)表示後に一旦離れて戻った時のアニメーション有効/無効の設定

上記のオプションは、組み合わせて使うことができ、scaleを0.8にして、durationでアニメーションの速度を調節したりも可能です。

数値とtrue/false以外はシングルクォーテーションで囲む

記述するオプションで、数値とtrue / falseの記述以外では、必ずシングルクォーテーションで囲むようにしましょう。
例えば、orign: ‘left’;のように ‘ で囲まないとエラーで動作しないので、注意しましょう。

かかかず
かかかず

それではオプションを指定したサンプルを見ていきましょう。

左から右へ

origin でどの方向からスライドインさせるか?を top/right/bottom/left の4種から指定できます。

また、origin の追加オプション distance を使って、動く距離を指定できます。動く距離の数値は、px/em/%のいずれかの単位を使って指定できます。

左から右へ

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo', { 
origin: 'left', // 左から
distance: '50px', // 50px
reset: true   // 何回もアニメーション表示
});

右から左に拡大しながら

scaleを使うと、徐々に拡大しながら表示させることができます。数値の1が拡大無しで、1未満は徐々に拡大しながら表示します。

1より大きい場合、徐々に縮小しながら表示されます。

右から左に拡大しながら

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo2', { 
origin: 'right', //右から左に
distance: '50px', // 50px移動
scale: 0.5, // 50%から拡大
reset: true   // 何回もアニメーション表示
});

徐々に縮小しながら

以下もscale と使ったサンプルですが、数値を1より大きい1.5にしています。この場合、徐々に縮小しながら表示されます。

徐々に縮小しながら

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo3', { 
scale: 1.5, // 150%から縮小
reset: true   // 何回もアニメーション表示
});

縦にくるっと回転

rotateを使うと、それぞれ指定した縦や横などの軸に合わせて回転しながら表示させることが可能です。

xは縦回転、yは横回転、zは傾きで、0を基準に数字を指定すると、数字の大きさに合わせてより回転します。そして、数字をマイナスで指定すると逆回転します。

以下は、xの縦回転の数値で600を指定したアニメーションです。

縦にくるっと回転

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo4', { 
rotate: { x: 600, y: 0, z: 0 }, // 縦にくるっと回転
reset: true   // 何回もアニメーション表示
});

横にくるっと回転

rotate で yの数値を600にした場合のアニメーションです。横にくるっと回転します。

横にくるっと回転

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo5', { 
rotate: { x: 0, y: 600, z: 0 }, // 横にくるっと
reset: true   // 何回もアニメーション表示
});

時計回りでくるっと回転

rotate で zの数値を600にした場合のアニメーションです。くるくるっと回って表示されます。

時計回りでくるっと回転

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo6', { 
rotate: { x: 0, y: 0, z: 600 },
reset: true   // 何回もアニメーション表示
});

左から回転しながら

どの方向からスライドインさせるか?のoriginと、rotateの回転のオプションを組み合わせた場合のアニメーションです。

色々組み合わせると、ダイナミックなアニメーションを付けることができます。

左から回転しながら

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo7', { 
origin: 'left', //左から
distance: '500px', //500px移動
rotate: { x: 0, y: 0, z: 500 }, // 回転
reset: true   // 何回もアニメーション表示
});

ゆっくりと徐々に表示

duration は、徐々に表示されるアニメーションの速度を指定できます。ここで指定した数値が大きいと、よりゆっくりとしたアニメーションになります。

ゆっくりと徐々に表示

ゆっくりと徐々に表示

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo8', { 
duration: 1500, // デュレーション
reset: true   // 何回もアニメーション表示
});

アニメーションの開始を遅らせる

delay を使って、アニメーション開始のタイミングをズラします。指定した数値が大きいと、その分アニメーションの開始が遅くなります。

アニメーションの開始を遅らせる

アニメーションの開始を遅らせる

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo9', { 
delay: 500, // ディレイ
reset: true   // 何回もアニメーション表示
});

透明から徐々に現れる

opacity は、要素の透明度を指定する時に使うオプションで、0.0(完全に透明)~1.0(完全に不透明)の数値で指定します。 1は透明がなしの普通の状態で、1未満の数値の場合、透明がなしの1になるよう徐々に現れます。

透明から徐々に現れる

透明から徐々に現れる

コードを表示する

ScrollRevealのオプション

ScrollReveal().reveal('.demo10', { 
opacity: 0, // 透明度0から
reset: true   // 何回もアニメーション表示
});

さいごに

ScrollRevealは、このようにアニメーションさせたい内容を簡単なオプションで実装できるので、使っているサイトもちらほら見かける人気のライブラリです。

最後に、この記事の内容をまとめると、

  • アニメーションのJavaScriptライブラリ
  • CDNで準備も簡単
  • オプションの組み合わせでいろんなアニメーションが可能。

です。

英語になりますが、気になった方は公式サイトを是非チェックしてみてください。

参考サイト

参考ScrollRevealの公式サイトScrollReveal

レンタルサーバー