SWELLでスクロールに連動するアニメーションを実装する

スクロールに連動するアニメーションを実装するのに、トリガーとなるスクロールを監視するコードを書いてみました。元々はscrollイベントを利用したコードを使っていましたが、負荷のせいでスクロールがカクつくケースがありました。

そこで負荷を軽減しながらスクロール位置(要素位置)を監視できるIntersection Observer APIを利用する方法に変更しました。

サンプルはSWELLに標準で用意されている黄色マーカー角に折り目のアニメーションです。

アニメーションサンプル

スクロールで範囲内に入るとマーカーがアニメーションします

角の折り目がアニメーションします。

サンプルコードはSWELLに用意されているクラスを利用していますが、他のテーマでもクラスを合わせれば動きます。

目次

要素の位置を監視するコードとアニメーション用CSS

子テーマを利用します。外観テーマファイルエディターSWELL CHILDに各コードをコピペしてください。

function.phpを編集する前に必ずバックアップを取ってください。

STEP
function.phpにコードを貼り付ける

SWELL CHILDfunction.phpに以下のコードを貼り付けて下さい。特に理由がなければ一番下に貼り付ければOKです。

function animate_css() {?>
	<script>
		const targetclasses = [
			document.querySelectorAll('.mark_yellow'),
			document.querySelectorAll('.is-style-crease')
		];

		const options = {
			threshold: 0,
			rootMargin: '-300px',
		};

		const observer = new IntersectionObserver(addAnimates,options);

		targetclasses.forEach(targetclass => {
			targetclass.forEach(value => {
				observer.observe(value);
			});
		});

		function addAnimates(entries){
			entries.forEach(entry => {
				if (entry.isIntersecting) {
				entry.target.classList.add('animate');
				}
			});
		};
	</script>
	<?php
}
add_action( 'wp_footer', 'animateCss' );

指定したクラスを持った要素が画面内に入ると、クラスanimateが付与されます。デフォルトのクラスではコントロールが難しい場合はブロックごとにオリジナルのクラスを付与してください。

アニメーションするクラスを追加する

NodeListtargetclassesdocument.querySelectorAll(‘.追加したいクラス名’)を追加します。元々の最終行に,(カンマ)を追加しないとエラーになります。

const targetclasses = [
    document.querySelectorAll('.mark_yellow'),
    document.querySelectorAll('.is-style-crease'),/*[,]を追加する*/
    document.querySelectorAll('.is-style-icon_info')/*追加クラス*/
];

オプション設定

const options = {
    threshold: 0,
    rootMargin: '-300px',
};
threshold

指定したクラスが画面内にどれくらい入ったらアニメーションを開始するか指定できます。0から1の間で指定します。0なら要素が1pxでも入れば開始、1なら要素が全て表示されるまで開始されません。デフォルト値は0です。

rootMargin

アニメーションを開始する位置をマージンで指定します。上下左右指定できます。単位必須です。デフォルト値は0です。

STEP
CSSコードを貼り付ける

function.phpで指定したクラスにanimateが付与されるのでそれぞれアニメーションを用意します。

貼り付ける場所は管理しやすいところで構いません。

  • SWELL CHILDstyle.css
  • カスタマイザーの追加CSS
/*////マーカー////*/
.mark_yellow {
    background: -webkit-linear-gradient(left, var(--color_mark_yellow) 50%, transparent 50%);
    background: linear-gradient(to right, var(--color_mark_yellow) 50%, transparent 50%); 
    background-repeat: no-repeat;
    background-size: 200% 0.4em; 
    background-position: 100% 1em;
    transition: 2s;
}
.mark_yellow.animate {
    background-position: 0% 1em;
}
/*////犬耳////*/
.is-style-crease:before {
    border:none;
    transform: rotate(0deg);  
    transition: 0.5s;
}
.is-style-crease.animate:before{
    border-bottom: 30px solid rgba(0,0,0,.1);
    border-left: 0 solid rgba(0,0,0,.1);
    border-right: 30px solid var(--color_content_bg);
    border-top: 0 solid var(--color_content_bg);
    box-shadow: -1px 1px 1px rgb(0 0 0 / 5%);
}

アニメーションは「CSS アニメーション」でググればサンプルが山のようにあります。

オプションを別々に設定したい場合

やっつけですがとりあえず以下のコードでオプションを別々に設定できます。画面に少しでも入ったら発火するオプションと画面下から30%の位置で発火するオプションをクラス別に設定しています。

function animate_css() {?>
	<script>
		const targetclasses0 = [
			document.querySelectorAll('.c-reviewStars'),
		];
		const options0 = {
			threshold: 0,
			rootMargin: '0%'
		};

		const targetclasses30 = [
			document.querySelectorAll('.mark_yellow'),
			document.querySelectorAll('.is-style-crease')
		];
		const options30 = {
			threshold: 1,
			rootMargin: '-30% 0%',
		};

		function mytest(myclass,myoptions) {
			const observer = new IntersectionObserver(showElements,myoptions);
			myclass.forEach(heading => {
				heading.forEach(value => {
					observer.observe(value);
				});
			});
		}
		
		function showElements(entries){
			entries.forEach(entry => {
				if (entry.isIntersecting) {
				entry.target.classList.add('animate');
				}
			});
		};

		mytest(targetclasses30,options30);
		mytest(targetclasses0,options0);
	</script>
	<?php
}
add_action( 'wp_footer', 'animateCss' );

クラスc-reviewStars用のアニメーションは次のCSSを追加してください。

/*////スターレーティング////*/
.c-reviewStars {
    opacity: 0;	
}
.c-reviewStars.animate {
    animation-name: fadeleft;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    display: inline-block;
}
アニメーションサンプル

スクロールで範囲内に入るとマーカーがアニメーションします

角の折り目がアニメーションします。

アイコンがアニメーションします。

プラグインに頼らなくてもスクロールアニメーションを割と簡単に実装することができます。記事内でゴリゴリにアニメーションさせると記事に集中できなくなるので、さりげないアニメーションに留めるのがコツのようです。要所で使えば効果はあると思います。興味ある方は試してみてください。

  • アップデート頻度…文句なし。機能も順調に拡張し続けている。不具合対応も早い。
  • サポート…フォーラム形式で活発。開発者と回答者がフォーラムのいい雰囲気を作っている。
  • ライセンス数…制限なし。好きなだけブログを量産できる。
  • ブロックエディタ対応…完全対応。記事執筆が超快適。
  • 機能性…他テーマと比較してもトップクラス。比較記事はこちら
  • デザイン性…基調はシンプルですが、カスタムする環境は整っています。色々な方向性でデザインすることが可能。
  • 価格…17,600円(税込み)

\ ブログ運営が楽しくなる/

よかったらシェアしてね!
  • URLをコピーしました!
目次