アサル（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）でした！
