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

目次

JavaScriptのライブラリー「ScrollReveal」

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

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

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

  • 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 

アニメーションを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クラスを設定

ここまで完了すれば、あとは要素にleftrotateとクラスを指定することで、設定したアニメーション効果が付与されます。

ブロック>高度な設定>追加CSSクラス

クラスの指定

これでスクロール検知アニメーションが実装できました。

アニメーションのデモ

追加CSSクラス:left

追加CSSクラス:bottom

追加CSSクラス:rotate

まとめ

今回紹介したScrollRevealを使用すれば、非常に簡単にスクロールアニメーションを実装することができます。

テーマによっては標準機能として実装されているものもありますが、大半が詳細なアニメーション設定は出来ないことがほとんどです。

当サイトで使用しているSWELLでは標準機能としては実装されていないため、当初はプラグインを使用してアニメ演出を行っていましたが、若干挙動が怪しく、重くなっていたため、今回の方法に変更しました。

オプションの記述に拘れば、非常に多彩な表現も可能なのでおすすめです。皆さんも実装されてはいかがでしょうか。

SWELL
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマ
SWELL | シンプル美と機能性の両立 - 圧倒的な使い心地を追求するWordPressテーマシンプル美と機能性の両立させ、圧倒的な使い心地を追求するWordPressテーマ - 『SWELL』の公式販売サイト。 最新のブロックエディター『Gutenberg』にも完全対応。プログ...
目次
閉じる