特定の位置までスクロールしたらアニメーションを開始する

今回は前回やった下から上に動かすアニメーションを今度は特定の位置までスクロールしたらアニメーションが開始されるようにします。

特定の位置までスクロールしたらアニメーションを開始する

html

<div class="box">
	<div class="bg"><p></p></div>
</div>

css

.box{
	width: 100%;
	height: 500px;
	position: relative;
	background: #fff;
}

.bg{
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 500px;
}

.bg p{
	position: relative;
	width: 100%;
	height: 500px;
}

.bg p:after{
    content: '';
    width: 100%;
    height: 500px;
    position: absolute;
    left: 0;
    bottom: 0;
}

.bg.bg_on p:after{
    background: #A4C6FF;
    animation-name: bganime;
    animation-duration: 1.5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

@keyframes bganime {
   0%  { height: 0;}
  50%  { height: 250px;}
  100% { height: 500px;}
}

@-webkit-keyframes bganime {
   0%  { height: 0;}
  50%  { height: 250px;}
  100% { height: 500px;}
}

js

特定の位置までスクロールしたら要素にクラス「bg_on」を追加してアニメーションを開始します。

jQuery(window).scroll(function() {
	var bgTop = jQuery('.bg').offset().top;
	console.log('要素の上からの位置: ' + bgTop);
	var bgh = jQuery('.bg').height();
	console.log('要素の高さ: ' + bgh);

	var bghbt = bgTop + bgh;
	console.log('要素の下からの位置: ' + bghbt);

	var wTop = jQuery(window).scrollTop();
	console.log('スクロール位置: ' + wTop);

	var wh = jQuery(window).height();
	console.log('表示領域の高さ: ' + wh);

	var wbt = wTop + wh;
	console.log('表示領域の下からの位置: ' + wbt);

	if(bghbt <= wbt){
		jQuery('.bg').addClass('bg_on');
	}
});

サンプル