ブログ
 

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

       

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

ScrollRevealについて

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

使い方

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


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

実装

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

HTML

<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>
CSS

 .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,
});

【使用したオプション】

origin 要素がどこから出現するかを指定
distance 要素が出現する時の移動幅を指定
delay アニメーションが実行されるまでの時間(ミリ秒)を指定
duration 動作が完了するまでの時間(ミリ秒)を指定
reset 要素の表示範囲から離れた時に初期の位置に[戻る(false)or戻らない(true)]を指定

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

最後に

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

 

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

 
  • このエントリーをはてなブックマークに追加