じわっと出現 | 動くWebデザインアイディア帳

テキストの動き
-じわっと出現-

デモページを見る

See the Pen 8-9 じわっと出現 by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen.

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

動きを実現する仕組み

JavaScriptで動きのきっかけ（画面が読み込まれたら、スクロールしたら）を判別し、blurTriggerにblurというクラス名がついたら、CSSのアニメーションを使い、じわっと出現させる。
※IE11 非対応の動きです。

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

HTMLの書き方

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

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

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

<p><span class="blurTrigger">テキストがじわっと出てきますIE11は非対応</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-9.js"></script>
</body>

自作のCSS内の書き方

.blur{
	animation-name:blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
  }

  to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
  }
}
 
.blurTrigger{
    opacity: 0;
}

自作のJS内の書き方

// blurTriggerにblurというクラス名を付ける定義

function BlurTextAnimeControl() {
	$('.blurTrigger').each(function(){ //blurTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
		$(this).addClass('blur');// 画面内に入ったらblurというクラス名を追記
		}else{
		$(this).removeClass('blur');// 画面外に出たらblurというクラス名を外す
		}
		});
}

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

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