ScrollRevealの使い方と注意点

htmlファイルの編集だけで動きのあるオシャレなサイトに。使い方と注意点をシンプルにメモしたのでどうぞ。

ScrollRevealとは

Appleのサイトなどでみかける、スクロールに合わせて各要素がアニメーションするスクリプト。

skrollrとは違いパララックスではない。要素が画面に入ったら指定したアニメーションを開始するタイプだ。

アニメーションの後は、設定してあるhtmlとcssによる表示になったところで終了する。
ふわっと表れたりするのでオシャレ。
ScrollReveal
これが意外と簡単に実装できるのだけれど、全くの素人にもわかるようにメモ。

編集するのはhtmlファイルのみ！

ステップ1　jsファイルを読み込む

まずScrollRevealを読み込む。
下記コードをhtmlファイルの</body>の手前あたりにコピペ

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
       window.sr = ScrollReveal({ reset: true ,mobile: true});
       sr.reveal( '.left', { origin: 'left' , distance: '50%', duration: 500 , scale: 1.0, delay :500 ,opacity: 0.5,});
       sr.reveal( '.right', { origin: 'right' , distance: '50%', duration: 500 , scale: 1.0, delay :500 ,opacity: 0.5,});
</script>

解説。
上から一行目はscrollreveal.min.jsを読み込んでいる。
ここは共通の設定だ。
githubにアップされているscrollreveal.min.jsをダウンロードして読み込んでもいい。
その場合は適宜、フォルダなどに入れてそこへのパスを書く。

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

など。（./は同一階層のフォルダを意味するので無くても良いが、いちおう記述）

話をもとのコードに戻そう。2行目から6行目のスクリプトがアニメーションの設定だ。
この部分についてはアニメーションの動作によって設定が変わる。上記はあくまでも一例だ。

3行目は要素（divなど）が画面に登場するたびにアニメーションさせますか？という問いに対してイエス！（true）と設定している。スクロールしたあと戻っても同じようにアニメーションさせる設定だ。
さらにモバイルでもアニメーションさせますか？もイエスだ。

4行目と5行目がメインと言える。
アニメーションさせたい要素のクラス名と、その後にアニメーションの動きを設定している。
詳細は次のステップで解説するが、上記の例では”left”と”right”の2種類のクラス名にそれぞれアニメーションを設定している。

クラス名は自由に設定していい。
アニメーションの種類がもっと必要ならさらにクラス名を追加して設定すればいい。

ステップ２　アニメーションさせたい要素のclass名と動作を設定する。

下記はクラス名を”left”とした場合の例だ。先ほどのスクリプトの4行目を確認してみよう。

sr.reveal( '.left', { origin: 'left' , distance: '50%', duration: 500 , scale: 1.0, delay :500 ,opacity: 0.5,});

シングルクオーテーションで’.left’とくくってある。
「クラス名がleftの要素にアニメーションをさせる」という意味だ。

クラス名のあとの{から}までの間にアニメーションのオプションが設定されている。
「要素がどちらから表れるのか」とか「どれくらいの時間をかけてアニメーションするのか」とかそういった詳細をカンマで区切って複数設定している。

sr.reveal( '.クラス名', { 項目: '値'　 , 　項目: '値' 　,　 項目: '値' 　,　 項目: '値' 　,　 項目: '値'});

項目: ‘値’が1セットとなり、必要に応じていくでも設定できる。

ステップ3　html内の各タグにclassを設定する

<div class="left">
この文字列に「ふわっ」と左から表れるアニメーションを付けたい！
</div>

という文字が、左側からふわっと表れるはずだ。
（ちなみにフォントのカラーやサイズは通常通りcssで設定している）

class=”left”と付けたタグはすべてふわっと表れるようになる。

アニメーションの種類と設定

代表的なオプションを下記にあげてみた。
アニメーションの動作をこれらのオプションの組み合わせで設定する。

ちなみに数値以外はシングルクオーテーション（’）でくくらないとエラーになる。地味に重要。

• orign　どの方向から表れるかを設定する項目：値は’bottom’, ‘left’, ‘top’, ‘right’
• distance　どれぐらいの距離からアニメーションを開始するか：値は50%など数値で単位は%,em,px,vwなど
• scale　何倍のサイズから表れるか設定する項目：値は0〜、基準値は1で等倍
• duration　アニメーションが完了するまでの速度：値は100など数値。単位はミリ秒
• delay　アニメーション開始までの待機時間：値は100など数値。単位はミリ秒
• opacity　アニメーション開始時の透明度：値は0.5など。0で透明、1で不透明になる。
• viewFactor　要素自身の高さの何％がビューポートに入ったらアニメーションを開始するか：値は1の場合100％を意味する。

他にも回転（rotate）など多数ある。より詳しく知りたい方はgithubのreadme（英語）を読んでください。「2.2. The Starting Defaults」に各項目とその初期設定値が書いてある。

注意点

今回の手順はScrollRevealのバージョン3以降での設定方法らしい。
バージョン2だと設定方法が全く違うらしく、ググってもこの二つのバージョンの情報が混在していて混乱する（した）。

またjQueryなどと併用する場合、スクリプトによっては専用のcssを読み込む時があるが、これが動作を妨げる場合があった。パララックスで有名なskrollrに含まれる”fixed-positioning.css”を指定するとエラーがでた。

アニメーションの設定の際、項目に対する値が数値以外の場合は、シングルクオーテーション（’）でくくらないとエラーになるので注意。

まとめ

1. scrollreveal.min.jsをhtmlファイルに読み込む
2. アニメーションの動作と、そのアニメーションを割り当てるクラス名を設定する
3. そのクラス名をアニメーションさせたい要素（divなど）に設定する
4. アニメーションの種類分だけ上記2以降を繰り返し設定する