ScrollReveal.js スクロールアニメーション

K's

2020年7月8日 23:32

1. はじめに

『ScrollReveal.js』はスクロールに連動してアニメーションする『JSプラグイン』です。

今回の完成形です。

画面収録 2020-07-04 7.54.30.mov

デモサイト

2. CDNを読み込む

公式サイト：scrollreveal-js.com

GitHub : scrollreveal-github.com

<!-- index.html -->
<!-- <body>タグの下部に記述 -->

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

3.HTML記述

<!-- index.html -->

   <div class = "scroll-content">
     <div class = "scroll-target text1">↓ scroll sample ↓</div>
     <div class = "scroll-target text2">scale</div>
     <div class = "scroll-target text3">top</div>
     <div class = "scroll-target text4">rigth</div>
     <div class = "scroll-target text5">left</div>
     <div class = "scroll-target text6">bottom</div>
     <div class = "scroll-target text7">animetion</div>
     <div class = "scroll-target image1"><img src = "image.jpg"></div>
   </div>

4. CSS記述

/* style.css */

.scroll-content{
 height: 100%;
 width: 100%;
}
.scroll-target{
 text-align: center;
 line-height: 600px;
 font-size: 30px;
 font-weight: bold;
}
.scroll-target img{
 height: 500px;
 width: 600px;
}

5. <script>内にJSを記述

2で記述したCDNの直後に記述する。

この一行だけでアニメーションは反応しますが、、、

ScrollReveal().reveal('.text2');

今回は以下の様に実装しました。

   <script src="https://unpkg.com/scrollreveal"></script>
   <script>
     ScrollReveal().reveal('.text2', { 
       duration: 2000, 
       scale: 8,
       delay: 100,
       reset: true,
       viewFactor: 0.4,
     });
     ScrollReveal().reveal('.text3', { 
       duration: 2000, 
       origin: 'top', 
       delay: 100,
       distance: '500px',
       reset: true,
       viewFactor: 0.4,
     });
     ScrollReveal().reveal('.text4', { 
       duration: 2000, 
       origin: 'right', 
       delay: 100,
       distance: '500px',
       reset: true,
       viewFactor: 0.4,
     });
     ScrollReveal().reveal('.text5', { 
       duration: 2000, 
       origin: 'left', 
       delay: 100,
       distance: '500px',
       reset: true,
       viewFactor: 0.4,
     });
     ScrollReveal().reveal('.text6', { 
       duration: 2000, 
       origin: 'bottom', 
       delay: 100,
       distance: '500px',
       reset: true,
       viewFactor: 0.4,
     });
     ScrollReveal().reveal('.text7', { 
       duration: 2000, 
       delay: 100,
       scale: 0.1,
       reset: true,
       viewFactor: 0.4,
     });
     ScrollReveal().reveal('.image1', { 
       duration: 2000,
       delay: 100,
       reset: true,
       opacity: 0,
       viewFactor: 0.4,
     });
   </script>
</body>

・オプション一覧

// duration: 800, // アニメーションの完了にかかる時間
// viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
// reset: true, // 何回もアニメーション表示するか
// delay: 100, //実行されるまでの時間
// interval: 100, //インターバルの時間
// opacity: 0, //表示前の透明度
// origin: 'top', //要素の表示される方向『top,rigth,bottom,left』
// scale: 4, //表示前の要素のサイズ
// desktop: true, //デスクトップブラウザでアニメーション
// mobile: true, //モバイル対応

6.最後に

この様になれば完成です。

その他オプションなど気になる方は公式サイトや公式のGitHubをご覧ください。

画面収録 2020-07-04 7.54.30.mov

今回、実践した物は『GitHub』にて自身の備忘録、復習用として載せていますので気になる方は見てみてください。

前回あげた記事の『aos.js スクロールアニメーション』より『ScrollReveal.js』の方が個人的に使いやすいと感じました。

参考になれば幸いです。

GitHub : my-github.com