スクロールの判定とCSSアニメーションを使ってみる

2018.02.26　Posted by Coding_team

Webプログラミング

こんにちは、ウェブラボ技術メモです。
今回はjsでスクロールの判定を行い、それに応じてCSSでアニメーションしてみます。

それでは実際に実装していきましょう。

まず、HTMLのbody内でアニメーションを効かせたい要素にクラスを与えます。

■HTML body内

　<div class="animation"><img src="<!--画像ファイル-->"></div>

1	<div class="animation"><img src="<!--画像ファイル-->"></div>

次にhead内でjquery本体を読み込ませ、スクロールの判定を行うjsを記述します。

■HTMLhead内

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).scroll(function (){
	$(".animation").each(function(){
	  var position = $(this).offset().top; //ページの一番上から要素までの距離を取得
	  var scroll = $(window).scrollTop(); //スクロールの位置を取得
	  var windowHeight = $(window).height(); //ウインドウの高さを取得
	  if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき
	    $(this).addClass('active'); //クラス「active」を与える
	  }
	});
});
</script>

$(window).scroll(function (){

$(".animation").each(function(){

var position = $(this).offset().top; //ページの一番上から要素までの距離を取得

var scroll = $(window).scrollTop(); //スクロールの位置を取得

var windowHeight = $(window).height(); //ウインドウの高さを取得

if (scroll > position - windowHeight){ //スクロール位置が要素の位置を過ぎたとき

$(this).addClass('active'); //クラス「active」を与える

}

});

</script>

これでスクロールの応じて、クラス「active」が与えられるようになりました。
最後にクラス「active」を得たとき、CSSでアニメーションさせるように記述します。

■HTMLhead内　CSS部分

.animation{
    opacity: 0; //不透明度0%
    -webkit-transform: translate3d(0, 100%, 0); //縦方向の位置を100%下げる
    transform: translate3d(0, 100%, 0);
    -webkit-transition: all 1s ease; //1秒間かけて変化させる
    transition: all 1s ease;
}

.animation.active{
    opacity: 1; //不透明度100%
    -webkit-transform: translate3d(0, 0, 0); // 縦方向の位置を戻す
    transform: translate3d(0, 0, 0);
}