【scrollReveal.js】スクロールでフワッとオシャレに表示する機能を簡単に実装する方法｜オプション一覧と導入手順（わかりやすい, 初心者）

javascript-prograshi（プロぐらし）-kv JavaScript
記事内に広告が含まれていることがあります。
[PR]

最近のウェブサイトは下にスクロールするたびにフワッと表示させることが流行っています。

この機能をWEBサイトに実装する方法は様々です。代表的なものにはIntersection Observer APIがありますが、今回はIntersection Observer APIよりも簡単に実装できるscrollReveal.jsの使い方を解説しています。


scrollReveal.jsとは何か？

scrollReveal.jsとはウェブデザインでよく使用されるJavaScriptライブラリの1つです。

scrollReveal.jsを使うとCSSなどの面倒な記述なしで、簡単にスクロールやページの読み込み時に要素をアニメーションさせることができます。

具体的には、要素が画面内に表示されたときや、特定のスクロール位置に達したときに要素をフェードイン、スライドインなど好きにカスタマイズすることができます。


scrollReveal.jsを使うための事前準備

まずは、scrollReveal.jsを使う方法は以下の２つがあります。

scrollReveal.jsを使うための事前準備
  1. 公式githubからファイルをダウンロードする
  2. CDNで読み込む



公式githubからファイルをダウンロードする

公式githubからダウンロードする場合はdistディレクトリの中にscrollreveal.min.jsなどのファイルが入っています。



これをサイトのディレクトリの中に保存し、body閉じタグの上にscriptタグを記述して読みこみます。

<script src="パス/scrollreveal.min.js"></script>


CDNで読み込む

もっと簡単な方法はCDNで読み込むことです。

head閉じタグの上に以下を追記します。

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

なお、上記は常に最新版を参照します。もし、バージョンを指定したい場合は、以下の@でバージョンを指定します。

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


▼CDN呼び出し(headタグに記述)

<!DOCTYPE html>
<html>
  <head>
 	<script src="https://unpkg.com/scrollreveal@4"></script>
  </head>
  <body></body>
</html>


スクロールで表示する

基本形

呼び出し及び要素への適用はとても簡単です。

ScrollReveal()で呼び出して、revealメソッドの引数に効果を適用したい要素とオプションを指定するだけです。

ScrollReveal().reveal('対象のセレクタ', オプション)


オプションがなくてもデフォルト設定で機能しますが味気ないです。基本的にはオプションを設定した方がいいです。

例えば以下のように設定します。

<script>
    ScrollReveal().reveal('セレクタ', {
        duration: 1000, // アニメーションの時間
        delay: 200,     // アニメーションの遅延
        easing: 'ease-in-out', // アニメーションのイージング
        origin: 'top',  // アニメーションの起点
        distance: '50px', // アニメーションの距離
        reset: true,     // スクロールアウトしたときに初期状態（再度非表示）にするか
    });
</script>


設定可能なオプション一覧

revealメソッドで使えるオプションは以下になります。

オプション内容初期値参考
delay遅延。画面に入ってから何秒後に表示するか。[ms]0{ delay: 0 }
distance表示したときにどのぐらい動かすか。[px]0px{ distance: ‘0px’ }
duration何秒間かけて表示するか。[ms]600{ duration: 600 }
easing動きの指定cubic-bezier(0.5, 0, 0, 1)’{ easing: ‘ease-in’ }
interval次の表示までの間隔。[ms]0{ interval: 600 }
opacity表示前の透明度。
※表示後の透明度の指定はできない		0{ opacity: 0.8 }
origin表示させる方向
・top, right, bottom, left
・distanceが0pxのときは意味ない		bottom{ origin: ‘top’ }
rotate回転角度。単位はdegreex:0, y:0, z:0rotate: {x: 20, z: 20}
scale開始時点のサイズ（倍率）1{ scale: 0.85 }
clean表示後にcleanメソッドを実行する。
※強制的にresetがfalseになる		FALSE{ cleanup: true }
container対象となるコンテナを指定document.documentElement{ container: ‘#sidebar’ }
desktopデスクトップで有効/無効にするTRUE{ desktop: false }
mobileモバイルで有効/無効にするTRUE{ mobile: false }
reset画面から外れたときに初期状態（表示前に戻す）
※狭い画面でだとすぐに非表示になるので注意		FALSE{ reset: true }
useDelaydelayを適用する回数
・always: 毎回適用
・once：初回のみ適用
・onload: ページがロードされるたびに適用		always{
delay: 1000,
reset: true,
useDelay: ‘once’
}
viewFactor画面上に要素の何割が入ったら表示させるか（0~1）で指定
・0.5は要素が半分入ったら
・1は要素が完全に入ったら		0{ viewFactor: 0.5 }
viewOffset表示を判定する画面の位置をずらすtop:0, right:0, bottom:0, left:0viewOffset: {
top: 60
}

（参考）ScrollReveal公式 API


cubic-bezierとは何か？

easingの値に 'cubic-bezier(0.5, 0, 0, 1)'が指定されています。cubic-bezierについては下記をご参考ください。

【CSS】transition-timing-functionやcubic-bezierやsteps, ease, linearとは何か？使い方を実例で解説



関数を呼び出せるオプション

ScrollRevealには通常のオプション以外に、関数を呼び出せるオプションも４つ用意されています。

関数を呼び出せる４つのオプション
  1. afterReset
  2. afterReveal
  3. beforeReset
  4. beforeReveal


afterReset

afterResetはresetが適用されたときに実行する関数を指定するオプションです。

初期値は以下のようになっています。

{ afterReset: function (el) {} }


使用例

function myCallback (el) {
    el.classList.remove('is-animating');
}

ScrollReveal().reveal('#example', { afterReset: myCallback });


afterReveal

afterRevealはrevealメソッドが完了したときに実行する関数を指定するオプションです。

初期値は以下のようになっています。

{ afterReveal: function (el) {} }


使用例

function myCallback (el) {
    el.classList.remove('is-animating');
    el.classList.add('is-visible');
}

ScrollReveal().reveal('#example', { afterReveal: myCallback });



beforeReset

beforeResetはresetが適用される前に実行する関数を指定するオプションです。※resetがtrueの場合のみ動きます

初期値は以下のようになっています。

{ beforeReset: function (el) {} }


使用例

function myCallback (el) {
    el.classList.remove('is-visible');
    el.classList.add('is-animating');
}

ScrollReveal().reveal('#example', { beforeReset: myCallback });


beforeReveal

beforeRevealはrevealメソッドが開始する前に実行する関数を指定するオプションです。

初期値は以下のようになっています。

{ beforeReveal: function (el) {} }


使用例

function myCallback (el) {
    el.classList.add('is-animating');
}

ScrollReveal().reveal('#example', { beforeReveal: myCallback });



デフォルトの設定を変更する

ScrollRevealのオプションはデフォルト値が決まっています。このデフォルト値を変更することができます。

ScrollReveal(オプション)
Point ~デフォルト設定の変更~
  • headタグ内に記述する。
  • ScrollRevealの引数で設定する。
  • 引数はオブジェクト形式で渡す。


例えば、表示されている要素が画面から出たときに再度非表示にするオプションに「reset」があります。resetはデフォルトではfalseになっています。

これをデフォルトでtrueにするには以下のように記述します。

<head>
    <script src="https://unpkg.com/scrollreveal"></script>
    <script>
        ScrollReveal({ reset: true });
    </script>
</head>


オプションのデフォルト値一覧

各オプションのデフォルト値は以下のようになっています。

{
    delay: 0,
    distance: '0px',
    duration: 600,
    easing: 'cubic-bezier(0.5, 0, 0, 1)',
    interval: 0,
    opacity: 0,
    origin: 'bottom',
    rotate: {
        x: 0,
        y: 0,
        z: 0,
    },
    scale: 1,
    cleanup: false,
    container: document.documentElement,
    desktop: true,
    mobile: true,
    reset: false,
    useDelay: 'always',
    viewFactor: 0.0,
    viewOffset: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0,
    },
    afterReset: function (el) {},
    afterReveal: function (el) {},
    beforeReset: function (el) {},
    beforeReveal: function (el) {},
}





ファーストビューの時間差表示

ファーストビューに見出しとキャッチコピーのように複数の要素がある場合に、時間差をつけて表示するにはdelayオプションを使って実行開始タイミングをずらします。

例えば以下のように記述します。

ScrollReveal().reveal('.headline');
ScrollReveal().reveal('.tagline', { delay: 500 });
ScrollReveal().reveal('.punchline', { delay: 2000 });


▼実例（右下のRerunをクリックしてください）

See the Pen Untitled by pro gurashi (@pro-gurashi) on CodePen.



▼色々設定 (画面が小さいので x0.5かx0.25で閲覧してください)

See the Pen ScrollReveal ファーストビュー by pro gurashi (@pro-gurashi) on CodePen.

タイトルとURLをコピーしました