ScrollReveal.jsを使えば「スクロール後に要素がふわっと浮き上がる」動きを最も少ない記述量で実装できる

ScrollRevealとは

スクロールによって表示された要素が、指定したアニメーションを実行してくれるJavaScriptのライブラリ

ScrollReveal - 公式サイト

ScrollRevealを使うメリット

• 記述量がとにかく少ない

• 実装まで時間がかからない

• CSSのtransitionプロパティやopacityプロパティなどを一切使わない

実装方法

1. ライブラリの読込み

ScrollReveal.js

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

bodyタグの閉じタグ直前にコピペしましょう。

2. HTMLの対象の要素にclassを付与する

ScrollReveal.html

<div class="container">
  <div class="block">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="block">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="block">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="block">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="block">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

class="box"
を付与している要素が、今回ふわっと表示させる要素になります。

3. ScrollReveal関数を呼び出す

ScrollReveal.js

ScrollReveal().reveal('.box');

1.で読み込んだライブラリとbodyタグの閉じタグの間に、このコードをコピペ。

あ、これで終わりです。

4. 実装まとめ

• HTMLファイル：実装させたい要素にclassを１つ付与
• JSファイル：ライブラリに１行読込み と ScrollReveal関数１行 だけ

※別ファイルを作成してScrollRevealを記述してもいいし、HTMLファイルのbodyタグの閉じタグ直前に書いてもOK

5. 結果

See the Pen ScrollReveal by はまちゃん👶🏻🍼 (@hamaboh_younect) on CodePen.

カスタマイズ

現在取り掛かっている案件に実装しているものが以下の記述です(resetは消すかも)。

ScrollReveal.js

ScrollReveal().reveal('.box', {
  duration: 1500, // アニメーションにかかる時間(単位：ms)
  reset: true, // リロードしなくても何回もフェードインする
  viewFactor: 0.5, // 要素が全体の ？？ % まで表示されたら実行(0〜1)
  origin: 'top', // 要素がどの方向からフェードインするか
});

カスタマイズのためのオプション一覧は
公式サイト > API > 画面左のメニュー
にあります。