SWELLにスクロールアニメーションを実装しよう

JavaScriptのライブラリー「ScrollReveal」

こんにちは。熊本の中小企業診断士、経営コンサルタントのLEPコンサルティングです。今回は最近のWEBサイトで良くお目にかかる、画面のスクロールを検知してアニメーションを行う機能の実装を行いたいと思います。

スクロールアニメを実装するには、プラグインを利用する方法やJavaScriptで自作する方法などがありますが、今回はScrollRevealというライブラリーを使用する方法を紹介します。

当サイトのTOPページに実装しているようなスクロール検知によるアニメーションが非常に簡単に実装することができます。メリットは下記の３点です。

jQueryなどのライブラリーに依存せず、単体で動く
アニメーションを細かく指定でき、CSSが不要
3kb程度で非常に軽量

なお、前提として当サイトで使用しているWordPress有料テーマSWELL向けのカスタマイズとなりますが、勿論、全てのテーマで実装が可能です。

後述しますが、プログラムの記述をSWELLはカスタマイザーから、他テーマはテーマエディターから編集するという違いのみです。

実装方法と記述内容

ライブラリーの読み込み

まずはライブラリの読み込みとスクリプトの記述を当サイトで実装している内容と同一のものをコピペしましょう。

カスタマイザー＞高度な設定＞bodyタグ終了直前に出力するコード
＊SWELL以外の方はテーマエディターから</body>直前に追記して下さい。

記述をする場所

記述内容

<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　

アニメーションを１回にする場合はfalseのままでOK。繰り返し行う場合はtrueに変更。

６行目'.left'

指定するclassの任意の名前を記載。アニメーションの内容に合った分かりやすい名前にする。

８行目、１０行目、１２行目も同様。ここでは４つのアニメーションを作成していることになる。

６行目{ origin: 'left' , distance: '100px', duration: 1000 , scale: 0.7, viewFactor:0.4 }