流れるように出現（下から上） | 動くWebデザインアイディア帳

テキストの動き
-流れるように出現（下から上）-

See the Pen 8-5 流れるように出現（下から上） by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen.

「Result」下のRerunを押して動きを確かめてね！↑

動きを実現する仕組み

CSSで、親要素　slide-in　に overflow:hiddenを指定してはみ出ている要素を隠す。
JavaScriptで動きのきっかけ（画面が読み込まれたら、スクロールしたら）を判別し、親要素のslide-inと子要素のslide-in_innerに方向が逆の動きをするクラス名を付与して、擬似的に文字にマスクをかけているように見せる。
（例：親要素を上の枠外から下に、子要素を下の枠外から上に移動し交差させる）

[使用するライブラリ]
＊jQuery

HTMLの書き方

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

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

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

<p>
<span class="slide-in downAnime">
<span class="slide-in_inner downAnimeInner">下から上へテキストが流れます。下から上へテキストが流れます。</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-5.js"></script>
</body>

自作のCSS内の書き方

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

/*全共通*/

.slide-in {
	overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
	display: inline-block;

}

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

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

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

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

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

自作のJS内の書き方

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

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