animate.jsを使ってテキストアニメーションを使ったのでその備忘録。元ネタはtobiasahlin.comのMOVING LETTERSというスクリプトで、jQueryを使わないように変更した。

• MOVING LETTERS

CodePen: https://codepen.io/zionboogie/pen/RqQmVE

See the Pen anime.js テキストのレターリングアニメーション by jun (@zionboogie) on CodePen.

HTML

<h1 class="title">JavaScript講座</h1>

CSS

.title {
  font-weight: 900;
  font-size: 3.5em;
}

.title .char-animation {
  display: inline-block;
  line-height: 1em;
}

JavaScript

// テキストを囲うボックス
let box_class = "title";
// 分割後のテキストを囲うボックス
let char_class = "char-animation";

// テキストを囲うボックスの取得（複数可能）
let item = document.querySelectorAll("." + box_class);
// ボックス毎の処理
for (var i = 0; i < item.length; i++) {
	// 文字の分割
	item[i].innerHTML = item[i].innerText.replace(/[^\x00-\x80]|(\w)/g, "$&");
}

// アニメーション
anime.timeline({loop: true})
	.add({
		targets: '.' + char_class,
		scale: [4,1],
		opacity: [0,1],
		translateZ: 0,
		easing: "easeInExpo",
		duration: 500,
		delay: function(el, i) {
			return 60*i;
		}
	}).add({
		targets: '.' + box_class,
		opacity: 0,
		duration: 1000,
		easing: "easeInExpo",
		delay: 1000
	});