スクロールアニメーションを簡単に実装しよう！

今回は簡単な記述でおしゃれなスクロールアニメーションが実現できるJavaScriptライブラリの紹介です。

ScrollRevealについて

JavaScriptライブラリで、こちらを利用するとスクロールした時のアニメーションが簡単に実装できる優れものです。
動作は公式サイトをご覧いただければイメージがつくと思います。
公式サイト：https://scrollrevealjs.org/

使い方

下記をheadに記述してライブラリを読み込ませます。

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

実装

今回はスクロールした時に画像が下から現れるようなアニメーションにしたいと思います。

<div class="container">
　<div class="row">
    <img class="flower" src="images/花1.jpg" />
    <img class="flower" src="images/花2.jpg" />
    <img class="flower" src="images/花3.jpg" />
　</div>
　<div class="row">
    <img class="flower" src="images/花4.jpg" />
    <img class="flower" src="images/花5.jpg" />
    <img class="flower" src="images/花6.jpg" />
　</div>
　<div class="row">
    <img class="flower" src="images/花7.jpg" />
    <img class="flower" src="images/花8.jpg" />
    <img class="flower" src="images/花9.jpg" />
　</div>
　<div class="row">
    <img class="flower" src="images/花10.jpg" />
    <img class="flower" src="images/花11.jpg" />
    <img class="flower" src="images/花12.jpg" />
　</div>
　<div class="row">
    <img class="flower" src="images/花13.jpg" />
    <img class="flower" src="images/花14.jpg" />
    <img class="flower" src="images/花15.jpg" />
  </div>
  <div class="row">
    <img class="flower" src="images/花16.jpg" />
    <img class="flower" src="images/花17.jpg" />
    <img class="flower" src="images/花18.jpg" />
  </div>
</div>

 .container{
   width: 1000px;
   margin: auto;
 }
 
 .row{
   display: flex;
 }

 img{
  margin: 10px;
  width: 30%;
 }

アニメーションの実装には基本的に下記の記述のみでOKです！

ScrollReveal().reveal('クラス名');

こちらに実現したい動きのオプションをつけます。

ScrollReveal().reveal('.flower'),{
  origin: 'bottom',
  distance: '200px',
  delay: 500,
  duration: 2000,
  reset: true,
});

【使用したオプション】

こちらのオプション以外にも用意されているので、幅広くスクロールアニメーションが実現できます！

最後に

実装した完成品が下記です。

最後までお読みいただきありがとうございました！

tsunemi

Webエンジニアとして勤務。

観劇と音楽が趣味です。