JS

HTMLの書き方

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

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

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

<p>
	<span class="slide-in rightAnime">
		<span class="slide-in_inner rightAnimeInner">右から左へテキストが流れます。右から左へテキストが流れます。</span>
	</span>
</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-3.js"></script>

CSSの書き方

/*========= 流れるテキスト ===============*/

/*全共通*/
.slide-in {
	overflow: hidden;
	display: inline-block;
}

.slide-in_inner {
	display: inline-block;
}

/*左右のアニメーション*/
.rightAnime{
	opacity: 0;/*事前に透過0にして消しておく*/
}

.slideAnimeLeftRight {
	animation-name:slideTextX100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes slideTextX100 {
	from {
		transform: translateX(-100%); /*要素を左の枠外に移動*/
		opacity: 0;
	}

	to {
		transform: translateX(0);/*要素を元の位置に移動*/
		opacity: 1;
	}
}

.slideAnimeRightLeft {
	animation-name:slideTextX-100;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	opacity: 0;
}


@keyframes slideTextX-100 {
	from {
		transform: translateX(100%);/*要素を右の枠外に移動*/
		opacity: 0;
	}
	to {
		transform: translateX(0);/*要素を元の位置に移動*/
		opacity: 1;
	}
}

JSの書き方

function slideAnime(){

//====右に動くアニメーションここから===

	$('.rightAnime').each(function(){
		var elemPos = $(this).offset().top-50;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			// 右から左へ表示するクラスを付与
			// テキスト要素を挟む親要素（右側）とテキスト要素を元位置でアニメーションをおこなう
			$(this).addClass("slideAnimeRightLeft ");
			// 要素を右枠外に移動しCSS アニメーションで右から元の位置に移動
			$(this).children(".rightAnimeInner").addClass("slideAnimeLeftRight");
			// 子要素は親要素のアニメーションに影響されないように逆の指定をし元の位置をキープするアニメーションをおこなう
		} else {
			// 右から左へ表示するクラスを取り除く
			$(this).removeClass("slideAnimeRightLeft ");
			$(this).children(".rightAnimeInner").removeClass("slideAnimeLeftRight");
		}
	});
}
	
// 画面をスクロールをしたら動かしたい場合の記述
$(window).scroll(function (){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面をスクロールしたら動かしたい場合の記述

// 画面が読み込まれたらすぐに動かしたい場合の記述
$(window).on('load', function(){
slideAnime();/* アニメーション用の関数を呼ぶ*/
});// ここまで画面が読み込まれたらすぐに動かしたい場合の記述