くりっくのマンツーマンレッスンは
ビデオ教材や講習会よりよくわかる,あらゆる皆様をサポートします,受講料金がリーズナブル,いますぐ始められます

詳しくはこちら

メイン画像に重ねる文字を切り替えるアニメーション

固定ページに追加する手順

  1. 一般ブロックのカバーを追加して、レイアウトを全幅にする。
  2. カバーに追加CSSクラス .text-ani を指定する。
  3. 切り替えて複数表示したい複数の文字列をカンマで区切って、spanタグで囲む。

JavaScript (sample6.js) に追加した行

	// 文字のアニメーション(切り替え表示)
	if ($('.wp-block-cover').hasClass('text-ani')) {
		var looptext = $('.text-ani span').text().split(',');
		$('.text-ani span').text(looptext[0]);
		$('.text-ani span').show();
		var i = -1;
		var loop = function() {
		if (i < 0) {
			i = 1;
			return;
		}
		$('.text-ani span').hide();
		$('.text-ani span').text(looptext[i]);
		$('.text-ani span').fadeIn();
		i++;
		i %= looptext.length;
		};
		var timer = setInterval(loop, 3000);
		setTimeout(loop, 0);
	}

スタイルシート (style.css) に追加した行

/* 文字のアニメーション(切り替え表示)部分 */
.wp-block-cover.text-ani {
font-size: 1.5rem !important;
}
.wp-block-cover.text-ani span {
padding-bottom: 2px;
border-bottom: 1px solid #00aeef;
font-size: 110%;
font-weight: bold;
}