【JavaScript】ScrollReveal.jsを使ってスクロールしたらふわっと表示される動きの作り方

ScrollRevealとは

スクロールして表示される要素をアニメーション化するJavaScriptライブラリです。

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

公式サイト：ScrollReveal.js

ScrollRevealの使い方

ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。
CDNは公式サイト：ScrollReveal.jsのインストールから読み込みます。

CDN

<script src="https://unpkg.com/scrollreveal"></script>

対象の要素にクラスを与える

<h2 class="animate">WORKS</h2>

ScrollReveal().reveal(".animate");

この一行を追加するだけで、スクロールでふわっと表示されるようになります。

ScrollRevealのオプション追加

ScrollRevealでは下記のようにオプションを指定することで、アニメーションの詳細な動きを指定することができます。

javascript

ScrollReveal().reveal(".animate", {
  origin: "bottom",　//下からふわっと表示させる
  distance: "50px", //表示された時に要素を50px移動させる
  duration: 800, //アニメーションの完了まで0.8秒。
  viewFactor: 0.5, //画面が表示エリアに対して0.5でアニメーションを開始
  reset: true,　//何回もアニメーション表示
});

どのようなオプションがあるかはScrollReveal.jsより確認することができます。

まとめ

こういったアニメーションは使いどころを考える必要がありますが、適切な場面で使えば大きな効果が出ると思います。
使う場面があればぜひこちらのライブラリを使用してみてください。