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

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

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

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

の内容です。

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

ScrollRevealとは

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

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

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

ScrollRevealの実装手順と使い方

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

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

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

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

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

かかかず

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

オプションの実装例10個

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

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

公式サイト ScrollReveal

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

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

かかかず

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

左から右へ

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

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

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

右から左に拡大しながら

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

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

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

徐々に縮小しながら

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

徐々に縮小しながら

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

縦にくるっと回転

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

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

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

縦にくるっと回転

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

横にくるっと回転

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

横にくるっと回転

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

時計回りでくるっと回転

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

時計回りでくるっと回転

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

左から回転しながら

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

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

左から回転しながら

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

ゆっくりと徐々に表示

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

ゆっくりと徐々に表示

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

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

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

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

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

透明から徐々に現れる

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

透明から徐々に現れる

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

さいごに

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

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

です。

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

参考サイト