JavaScriptのライブラリー「ScrollReveal」
こんにちは。熊本の中小企業診断士、経営コンサルタントのLEPコンサルティングです。今回は最近のWEBサイトで良くお目にかかる、画面のスクロールを検知してアニメーションを行う機能の実装を行いたいと思います。
スクロールアニメを実装するには、プラグインを利用する方法やJavaScriptで自作する方法などがありますが、今回はScrollRevealというライブラリーを使用する方法を紹介します。
当サイトのTOPページに実装しているようなスクロール検知によるアニメーションが非常に簡単に実装することができます。メリットは下記の3点です。
- jQueryなどのライブラリーに依存せず、単体で動く
- アニメーションを細かく指定でき、CSSが不要
- 3kb程度で非常に軽量
なお、前提として当サイトで使用しているWordPress有料テーマSWELL向けのカスタマイズとなりますが、勿論、全てのテーマで実装が可能です。
後述しますが、プログラムの記述をSWELLはカスタマイザーから、他テーマはテーマエディターから編集するという違いのみです。
実装方法と記述内容
ライブラリーの読み込み
まずはライブラリの読み込みとスクリプトの記述を当サイトで実装している内容と同一のものをコピペしましょう。
記述をする場所

記述内容
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
window.sr = ScrollReveal({ reset:false ,mobile: true});
sr.reveal( '.left', { origin: 'left' , distance: '100px', duration: 1000 , scale: 0.7, viewFactor:0.4 });
sr.reveal( '.right', { origin: 'right' , distance: '100px', duration: 1000 , scale: 0.7, viewFactor:0.4 });
sr.reveal( '.bottom', { origin: 'bottom' , distance: '100px', duration: 1000 , scale: 0.7, viewFactor:0.8 });
sr.reveal( '.rotate', { origin: 'bottom' , distance: '100px', duration: 1500 , scale: 0.7, viewFactor:0.8,rotate:{ x: 180, y: 0, z: 0 } });
</script>
記述の説明
- 4行目
reset:false
-
アニメーションを1回にする場合は
false
のままでOK。繰り返し行う場合はtrue
に変更。 - 6行目
'.left'
-
指定するclassの任意の名前を記載。アニメーションの内容に合った分かりやすい名前にする。
8行目、10行目、12行目も同様。ここでは4つのアニメーションを作成していることになる。
- 6行目
{ origin: 'left' , distance: '100px', duration: 1000 , scale: 0.7, viewFactor:0.4 }
-
アニメーションのオプション。“”の順番に<起点・距離・アニメの長さ(1秒)・開始時の大きさ・アニメ開始に必要な要素の表示割合(40%)>となっている。
-
設定できる詳細はオプション一覧を参照のこと。
アニメーションさせたい要素に追加CSSクラスを設定
ここまで完了すれば、あとは要素にleft
やrotate
とクラスを指定することで、設定したアニメーション効果が付与されます。
クラスの指定

これでスクロール検知アニメーションが実装できました。
アニメーションのデモ
追加CSSクラス:left

追加CSSクラス:bottom

追加CSSクラス:rotate

まとめ
今回紹介したScrollRevealを使用すれば、非常に簡単にスクロールアニメーションを実装することができます。
テーマによっては標準機能として実装されているものもありますが、大半が詳細なアニメーション設定は出来ないことがほとんどです。
当サイトで使用しているSWELLでは標準機能としては実装されていないため、当初はプラグインを使用してアニメ演出を行っていましたが、若干挙動が怪しく、重くなっていたため、今回の方法に変更しました。
オプションの記述に拘れば、非常に多彩な表現も可能なのでおすすめです。皆さんも実装されてはいかがでしょうか。
