超簡単!ScrollRevealでスクロールで要素をアニメーション表示する方法

ScrollReveal.js

アサル(ASAL)です。

今回は、ScrollReveal.js(ライブラリ)を使って初心者でも簡単にスクロールに合わせて要素を表示する、アニメーション(動かす)させる方法をご紹介します!

ScrollRevealならjsもjQueryも不要でスクロールアニメーションで要素の表示ができるので、オススメです!

それでは、早速みていきましょう!

ScrollRevealとは

スクロールアニメーションを実装したいときに超有能なライブラリがScrollRevealです!

要素が画面に表示されたら、指定したアニメーションを実行してくれ、さらには「ふわっと表示」「上下左右好きな場所から表示」「遅れて表示」など様々なアニメーションを簡単に実装することができます。

ScrollRevealの良いところは、軽量でjQueryなどのライブラリに依存しないし、CSSも不必要にもかかわらず、アニメーションを細かく調整できるというところですね。

デモで色々見てみる

試しにデモを見てみましょう。

他にも様々なアニメーションが用意されているので、導入方法から使い方まで全てご紹介していきます!

ScrollRevealの使い方

ライブラリを読み込み

最初に、ライブラリをscriptタグで読み込むために下記のソースコードを「フッターの」の前にコピペします。

ちなみに、インストールするよりもCDNで読み込んだ方が処理的にも速いんですよね。

なので今回は、下記のコピペで終わらせちゃいましょう!

// 最新バージョンの場合はこちら
<script src="https://unpkg.com/scrollreveal"></script>
// バージョン指定をしたい場合はこちら
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>

動かしたい要素にクラスを与える

次に、動かしたい要素にクラスを追加します。

今回は、アニメーションをつけたい要素に「animation」というクラスを指定します(お好みでクラス名は変更できます)。

アニメーションを実装

あとは、最初に読み込んだライブラリからScrollRevealという関数を呼び出し、アニメーションを実装するために下記の1行を「scriptタグかjsファイル」に追加するだけです!

ScrollReveal().reveal('.animation');

ここでは、最初に「animation」というクラス名を指定した時と同じクラス名にして下さい。

オプション追加で細かな動きを設定

細かいアニメーションを設定したい方は、下記のようにオプションを指定することで、より細かい動きを指定することができるので、色々試してみましょう!

オプション内容は、公式サイトでも確認することができます。

オプション 説明
delay ミリ秒単位の時間 アニメーションが実行されるまでの時間
distance px/em/% 表示された時に要素が移動する距離
duration ミリ秒単位の時間 アニメーションの完了にかかる時間
easing アニメーションの種類 ease, ease_in_outなど
interval ミリ秒単位の時間 各公開間の時間
opacity 0~1 各表示される前の不透明度
origin top,right,bottom,left 各表示される前の不透明度
scale 数字 表示される前の要素のサイズ
desktop true/false デスクトップでアニメーションを有効/無効
mobile true/false モバイルでアニメーションを有効/無効
reset true/false viewportを離れる時に初期の位置に戻る要素を有効/無効
viewFactor 数値(単位は%) 要素がどの程度ページに入ったらアニメーションするか

まとめ

シンプルなスクロールアニメーションを実装したいときには、ScrollRevealのようなライブラリを活用すると作業も進みますし、初心者の方でも細かく使えるので、オススメですね!

使う機会があれば、是非、使ってみて下さい!

以上、アサル(ASAL)でした!

他にもこんな記事があります!