kdcsライブラリー

要素内で文字数がバラバラな場合、高さが揃わず見た目が悪いので、一番文字数が多い要素の高さに合わせる方法

最下部、「matchHeight」に高さを揃えたい要素のクラスを指定

function matchHeight(targetElement) {
  const targetElements = document.querySelectorAll(targetElement)

  if (targetElements.length > 1) {
    let heightArray = []
    targetElements.forEach((element) => {
      const height = element.clientHeight
      heightArray.push(height)
    })
    const maxHeight = Math.max(...heightArray)

    targetElements.forEach((column) => {
      column.style.height = maxHeight + 'px'
    })
  }
}
window.addEventListener('load', () => {
  matchHeight('.thumText h3', '.thumText p')
})

文字列を分割して1文字ずつcssアニメーションで動かしたい場合、javascriptを使用してspanタグで1文字ずつ囲む方法。
文字列にスペースがあるときは、そのままスペースを出力させる。

$.fn.letterSpan = function() {

$(this).each(function() {
    var text = $.trim(this.textContent),
        html = "";

    text.split("").forEach(function(v) {
    if (v == ' ') {
        html += "<span> </span>";
    } else {
        html += "<span>" + v + "</span>";
      }
    });

    this.innerHTML = html;
    });
};

$(".hogehoge").letterSpan();
$(".popupText").letterSpan();
$("#dummy h6").letterSpan();

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));
		        }
		    });
		});
	}
});