kdcsライブラリー

GSAPでもアニメーション動作をレスポンシブ対応させたい場合

※matchMedia()が使えるバージョンは、「3.11.0」以降

ブレークポイントwidth（対象の幅）が以上と以下の2点の例

$(function(){
  let mm = gsap.matchMedia();

  mm.add("(max-width: 1024px)", () => {
    // ここに1024px以下のときのコードを書きます
  });

  mm.add("(min-width: 1025px)", () => {
    // ここに1025px以上のときのコードを書きます
  });

});

ブレークポイントwidth（対象の幅）が3つ以上の場合はそれぞれの幅の指定（上限と下限）が必要

let mm = gsap.matchMedia();

mm.add("(min-width: 600px) and (max-width: 768px)", () => {
  // 600px以上768px以下のときは上下に動かす
  gsap.to(".box", { yPercent: 50, yoyo: true, duration: 1, ease: "none", repeat: -1 });
});

mm.add("(min-width: 769px) and (max-width: 1024px)", () => {
  // 769px以上1024px以下のときは左右に動かす
  gsap.to(".box", { xPercent: 50, yoyo: true, duration: 1, ease: "none", repeat: -1 });
});

mm.add("(min-width: 1025px)", () => {
  // 1025px以上のときは回転させる
  gsap.to(".box", { rotation: 360, duration: 2, ease: "none", repeat: -1 });
});

GSAP(GreenSock Animation Platform) とは、Greensock社が提供する簡単にアニメーションを実装できるJavaScriptのライブラリ

こちらからZipファイルをダウンロード。
ページ内の「Get GSAP↓」をクリックするとZipファイルのダウンロードが始まる。
解凍し、テーマフォルダ内に以下を配置する

gsap.min.js
ScrollTrigger.min.js
setting.js（gsapの設定ファイル：ファイル名は任意）

数値のデータを見せるときに0から指定の値までカウントアップさせる手段

jQuery
footerにjQueryとjquery.inviewが必要

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/js_file/jquery.inview.min.js"></script>

html

<div id="box1" class="box">
<div>現在の施工数<br><span class="count-up count-size">180</span>件</div>
</div>

javascript
#box1はカウントアップ（count-up）#box2はカウントダウン（count-down）
#box1は「.one」を指定することで1回のみ動作、#box2は「.on」指定で要素が見えたときに何度でも実行

//カウントアップ -------------------------------------------
$('#box1').one('inview', function(event, isInView) {
	if (isInView) {
		//要素が見えたときに実行する処理
		$("#box1 .count-up").each(function(){
			$(this).prop('Counter',0).animate({//0からカウントアップ
		        Counter: $(this).text()
		    }, {
				// スピードやアニメーションの設定
		        duration: 2000,//数字が大きいほど変化のスピードが遅くなる。2000=2秒
		        easing: 'swing',//動きの種類。他にもlinearなど設定可能
		        step: function (now) {
		            $(this).text(Math.ceil(now));
		        }
		    });
		});
	}
});
//カウントダウン -------------------------------------------
$('#box2').on('inview', function(event, isInView) {
	if (isInView) {
		//要素が見えたときに実行する処理
		$("#box2 .count-down").each(function(){
			 $(this).prop('Counter',10).animate({//10からカウントダウン
		        Counter: $(this).text()
		    }, {
				// スピードやアニメーションの設定
		        duration: 1000,//数字が大きいほど変化のスピードが遅くなる。1000=1秒
		        easing: 'swing',//動きの種類。他にもlinearなど設定可能
		        step: function (now) {
		            $(this).text(Math.ceil(now));
		        }
		    });
		});
	}
});

Advanced Custom Fieldsのテキストエリアは改行の設定ができるので通常はテキストエリアの入力時に開業すれば自動的にbrタグが入るようになっている。改行設定しているにもかかわらずテキストエリア内にbrタグを書き込むと、出力時にPHPで「mb_substr」にしても完全にbrタグが取り除けない事案が発生。

これ（brタグを全て削除）を解決するための方法
※文字数40で、文字の後に「…」を入れる

<?php
$text = get_field('カスタムフィールド名');
$str = str_replace(array('<br>','<br />',"\r\n","\n","\r",'　'),'',$text);
$mbtext = mb_substr(($str),0,30,'utf-8');
echo $mbtext.'...';
 ?>

トップページのメインビジュアルにスクロールを促すアニメーションを入れる
html

<div class="scrolldown"><span>Scroll</span></div>

css

.scrolldown{
  position:absolute;
  left:50%;
  bottom:60px;
  height:50px;
}
.scrolldown span{
  position: absolute;
  left:-15px;
  top: -15px;
  color: #eee;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
}
/* 線の描写 */
.scrolldown::after{
  content: "";
    /*描画位置*/
  position: absolute;
  top: 0;
    /*線の形状*/
  width: 1px;
  height: 30px;
  background: #eee;
    /*線の動き1.4秒かけて動く。永遠にループ*/
  animation: pathmove 1.4s ease-in-out infinite;
  opacity:0;
}
/*高さ・位置・透過が変化して線が上から下に動く*/
@keyframes pathmove{
  0%{
    height:0;
    top:0;
    opacity: 0;
  }
  30%{
    height:30px;
    opacity: 1;
  }
  100%{
    height:0;
    top:50px;
    opacity: 0;
  }
}