背景色が伸びて出現（上から下） | 動くWebデザインアイディア帳

テキストの動き
-背景色が伸びて出現（上から下）-

See the Pen 8-14 背景色が伸びて出現（上から下） by 動くWebデザインアイディア帳 (@ugokuweb)on CodePen.

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

動きを実現する仕組み

CSSを使い、親要素　bgextend　に overflow:hiddenを指定してはみ出す要素を隠す。
JavaScript側で動きのきっかけ（画面が読み込まれたら、スクロールしたら）を判別し、親要素のbgextendにつけた動きのきっかけになるクラス名（例　bgLRextendTrigger）に背景が伸縮するアニメーションをつける。

文字列を囲う子要素のbgappearTriggerには、親要素のアニメーション発動と同時に bgappearというクラス名をつけ、時間を遅らせて文字列の透過を0から1にして出現させる。

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

HTMLの書き方

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

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

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

<p><span class="bgextend bgUDextendTrigger"><span class="bgappearTrigger">背景色が伸びて出現（上から下）</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-14.js"></script>
</body>

自作のCSS内の書き方

/*全共通*/

.bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:1s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}

@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}

/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}


/*上から下*/
.bgUDextend::before{
	animation-name:bgUDextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgUDextendAnime{
	0% {
		transform-origin:top;
		transform:scaleY(0);
	}
	50% {
		transform-origin:top;
		transform:scaleY(1);
	}
	50.001% {
		transform-origin:bottom;
	}
	100% {
		transform-origin:bottom;
		transform:scaleY(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgUDextendTrigger{
    opacity: 0;
}

自作のJS内の書き方

// 動きのきっかけの起点となるアニメーションの名前を定義
function BgFadeAnime(){

    // 背景色が伸びて出現（上から下）
	$('.bgUDextendTrigger').each(function(){ //bgUDextendTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			$(this).addClass('bgUDextend');// 画面内に入ったらbgUDextendというクラス名を追記
		}else{
			$(this).removeClass('bgUDextend');// 画面外に出たらbgUDextendというクラス名を外す
		}
	});	
   // 文字列を囲う子要素
	$('.bgappearTrigger').each(function(){ //bgappearTriggerというクラス名が
		var elemPos = $(this).offset().top-50;//要素より、50px上の
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();
		if (scroll >= elemPos - windowHeight){
			$(this).addClass('bgappear');// 画面内に入ったらbgappearというクラス名を追記
		}else{
			$(this).removeClass('bgappear');// 画面外に出たらbgappearというクラス名を外す
		}
	});		
}

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

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