JS

HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。

<link rel="stylesheet" type="text/css" href="css/8-7.css">

body内のテキストを表示させたい場所にHTMLを記載します。

<p class="rollAnime">テキストが回転します</p>

body 終了タグ直前にjQueryと、動きを制御する自作のJS の2 つを読み込みます。

<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<!--自作のJS-->
<script src="js/8-7.js"></script>

CSSの書き方

.rollAnime.roll span {
	transition-property: opacity,transform;
	transform: rotateY(360deg);
	transition: all .8s cubic-bezier(.77,0,.175,1);
	transition-timing-function: cubic-bezier(.77,0,.175,1);
	display: inline-block;
}

JSの書き方

// rollAnimeにrollというクラス名を付ける定義
function RollAnimeControl() {
	$('.rollAnime').each(function () {
		var elemPos = $(this).offset().top - 50;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		var childs = $(this).children(); //rollAnimeの子要素を取得
		if (scroll >= elemPos - windowHeight) {
			$(childs).each(function (i) { //子要素を1つ1つ処理をおこなう
				if (i < 10) { //10未満の場合
					$(this).css("transition-delay","."+i+"s"); //子要素にcsstransition-delayを追加
				} else { //10以上の場合
					var n = i / 10; //ミリ秒指定なので10で割る
					$(this).css("transition-delay",n+"s"); //子要素にcsstransition-delayを追加
				}
			});
			$(this).addClass("roll"); //rollというアニメーションクラスを付与
		} else {
			$(childs).each(function () { //子要素を1つ1つ処理をおこなう
				$(this).css("transition-delay","0s");//子要素にcsstransition-delayの秒を0とする
			});
			$(this).removeClass("roll");//rollというアニメーションクラスを除去
		}
	});
}

// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function () {
	RollAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールをしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
	//spanタグを追加する
	var element = $(".rollAnime");
	element.each(function () {
		var text = $(this).text();
		var textbox = [];
		text.split('').forEach(function (t, i) {
			if (t !== " ") {
				if (i < 10) {
					textbox += '<span style="transition-delay:.' + i + 's;">' + t + '</span>';
				} else {
			var n = i / 10;
			textbox += '<span style="transition-delay:' + n + 's;">' + t + '</span>';
				}
			} else {
				textbox += t;
			}
		});
	$(this).html(textbox);
});
	RollAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述