JINテーマでページネーションにアニメーションを追加する方法（フワッと順番に表示させる）【jQuery】

JINテーマを独自にカスタマイズした中で今回はページネーションにアニメーションを追加しましたので紹介します。

▪アニメーション動作は下のアニメーションの動きになります。⇩

アニメーションを導入する上で親テーマのfunctions.phpを操作するのでバックアップを推奨します。

バックアップについて詳しく知りたい方は下記の記事を参考に。

All-in-One WP Migrationアップロードファイルサイズを100MB～10GBに上げる方法【プラグイン】復元にはファイルサイズの最大サイズが100MBまでとなっているので、この最大サイズを10GB以上に引き上げる方法について解説していきます。...

画像で実装した場合の参考例

▪フワッと左から画像を順番に表示⇩

➡ CodePenはこちら

See the Pen フワッと左から画像を順番に表示 by pull-design (@design90806871) on CodePen.

※上記例を参考にコードを記述します。

ページネーションのコード

ページネーションを<div>で囲っているクラスはpager-topになります。

この大枠pager-topのulのクラスにfluffyのクラスを追加します。

このulにクラスを追加する場合はfunctions.phpにあるコメントアウト名//ページャーに記述されているので確認します。

functions.phpの確認

WordPress管理画面→外観→テーマファイルエディター→選択するテーマを選択JIN→functions.phpを選択。

※親テーマが更新された場合に変更が消えないように子テーマにコードを移動させます。

ctrl+fで検索ページャーと入力するとページネーションのfunctionが見つかります。

1039行目に//ページャーがヒットするので1039行から1104行をCtrl+X「切り取り」子テーマのjin-childのfunctions.phpに貼り付けます。

※子テーマを作っていない方は下記記事をご確認ください。

子テーマでJSを読み込む方法【WordPress】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。...

子テーマに記述した内容のulのクラスにfluffyを追加します。

echo '<ul class="pagination ef" role="menubar" aria-label="Pagination">';
// ⇩ クラス名fluffyを追加 ⇩
echo '<ul class="pagination ef fluffy" role="menubar" aria-label="Pagination">';

ファイルを更新をクリックして保存します。

CSSの追加

子テーマのスタイルシートを選択して、下記コードを貼り付けます。

▪CSS貼り付けコード⇩

/*------------------------------------
ふわっとCSS↓
------------------------------------*/
.fadeup {
  animation-name:fadeupAnime;
  animation-duration:0.8s;
  animation-fill-mode:forwards;
  opacity: 0;
}
@keyframes fadeupAnime{
  from {
  opacity: 0;
  transform: translateX(-100px); /*左から出現*/ 
  }
  to {
  opacity: 1;
  transform: translateY(0);
  }
}
@media screen and (max-width: 600px) {
  .fluffy img {
    width: 100%;
    margin: auto;
    display: block;
    padding: 10px 0;
  }
}

ファイルを更新をクリックして保存します。

※下から出したい場合はtransform: translateX(-100px);からtransform: translateY(100px);に変更すると下から出現するようになります。

JSの追加

子テーマのfooter.phpを選択して、<script>・</script>で囲い下記コードを貼り付けます。

<script>
//左からふわっと順番に表示
function fluffyAnime() {
	var time = 0.3; //表示時間
	var value = time;
	$('.fluffy').each(function () {
		var parent = this; //親要素を取得
		var elemPos = $(this).offset().top; //要素の位置まで来たら
		var scroll = $(window).scrollTop(); //スクロール値取得
		var windowHeight = $(window).height(); //画面の高さ取得
		var childs = $(this).children(); //子要素を取得
		if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) { //指定領域内にスクロールが入ったらまた親要素にクラスplayがなければ
			$(childs).each(function () {
				if (!$(this).hasClass("fadeup")) { //アニメーションのクラス名が指定されているかどうかをチェック
					$(parent).addClass("play"); //親要素にクラス名playを追加
					$(this).css("animation-delay", value + "s"); //アニメーション遅延のCSS animation-delayを追加し
					$(this).addClass("fadeup"); //アニメーションのクラス名を追加
					value = value + time; //delay時間を増加させる
					//全ての処理を終わったらplayを外す
					var index = $(childs).index(this);
					if((childs.length-1) == index){
						$(parent).removeClass("play");
					}
				}
			})
		}else {
			$(childs).removeClass("fadeup"); //アニメーションのクラス名を削除
			value = time; //delay初期値の数値に戻す
		}
	})
}
$(window).scroll(function (){
  fluffyAnime(); /* アニメーション用関数を呼ぶ*/
});
$(window).on('load', function(){
  fluffyAnime(); /* アニメーション用関数を呼ぶ*/
});
</script>

ファイルを更新をクリックして保存します。

これでページネーションのアニメーションは完了です。

※繰り返しを解除する場合

上部にスクロールした場合に.removeClass(“fadeup”);でクラスを削除する処理を行っているので、繰り返しを解除する場合は、else {}の部分をコメントアウトするか削除で解除できます。

// else {
// 	$(childs).removeClass("fadeup"); //アニメーションのクラス名を削除
// 	value = time; //delay初期値の数値に戻す
// }

まとめ

今回親テーマのコードを切り取って子テーマに移動したので、親テーマがアップデートされた際に干渉する恐れがあるので、変更した部分は覚えておくことをおすすめします。

JINカスタマイズ他のシリーズもあるのでいろいろカスタムしたい方はご確認ください。

▪カテゴリーリストの色変更⇩

JINテーマ追加cssで自由にカスタマイズ【カテゴリーリスト】トップページの色の変更、カスタマイズなど、有料テーマのカスタマイズ機能だけでは出来ない変更方法を紹介します。追加CSSに記述するコードです。...

▪プロフィールページを作る方法

WordPressテーマ「JIN」｜プロフィールページを作る方法【ウィジェット】ブログサイトでサイドバーにウィジェットに「プロフィール」を追加して画像を貼り付けて、実際のブログサイトでその画像をクリックした際に、ランダムで投稿ページに飛んでしまう。ウィジェット「プロフィール」の画像に対してURL設定がないため自身のプロフィールページを作る方法がわからない。WordPressテーマ「JIN」のプロフィールページの作り方について解説します。...