JS

HTMLの書き方

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

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

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

<p class="TextRandomAnime">テキストがバラバラに出現します</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-1.js"></script>

CSSの書き方

.TextRandomAnime span{
	opacity: 0;
}

.TextRandomAnime.appearRandomtext span{ 
	animation:text_randomanime_on .5s ease-out forwards;
}

/*アニメーションで透過を0から1に変化させる*/
@keyframes text_randomanime_on {
	0% {
		opacity:0;
		}
	100% {
		opacity:1;
	}
}

.TextRandomAnime.appearRandomtext span:nth-child(2n) {
	animation-delay: .5s;/* spanのついた2の倍数の文字列の変化を0.5秒遅らせる*/
}

.TextRandomAnime.appearRandomtext span:nth-child(3n+1) {
	animation-delay: .15s;/* spanのついた3の倍数＋1の文字列の変化を0.15秒遅らせる*/
}

JSの書き方

// TextRandomAnimeにappearRandomtextというクラス名を付ける定義
function TextRandomAnimeControl() {
	$('.TextRandomAnime').each(function () {
		var elemPos = $(this).offset().top - 50;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight) {
			$(this).addClass("appearRandomtext");
		} else {
			$(this).removeClass("appearRandomtext");
		}
	});
}

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

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function () {
	//spanタグを追加する
	var element = $(".TextRandomAnime");
	element.each(function () {
		var text = $(this).text();
		var textbox = '';
		text.split('').forEach(function (t) {
			textbox += '<span>' + t + '</span>';
		});
	$(this).html(textbox);
});

TextRandomAnimeControl();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述