【jQuery】スクロールして可視範囲に入ったら要素を表示するアニメーション

動きがないサイトだと退屈に思われてしまうことがあります。

今回は、スクロールをして可視範囲になったら要素がふわっと表示されるアニメーションを簡単にjQueryで実装する方法をお伝えしますので、是非サイト作りに役立てて下さい。

DEMOはこちら

↓スクロールしてください↓

実装方法

以下のHTMLとCSSを用意します。

HTML

<div>
  <img src="sample.jpg" class="fadein">
</div>

CSS

.fadein {
  opacity : 0;
  transform : translate(0, 100px);
  transition : all 1s;
}

.fadein.active{
  opacity : 1;
  transform : translate(0, 0);
}

jQuery

$(function(){
	$(window).scroll(function (){
		$('.fadein').each(function(){
			var position = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > position - windowHeight + 200){
			  $(this).addClass('active');
			}
		});
	});
});

CSSの詳細

アニメーション（動き）はCSSで指定します。まず.fadeinが付いた要素の透明度をゼロにして隠し、位置を下に100px下げます。

スクロールして、要素に.activeが付いたら透明度を1にし、位置を元の場所に戻します。

jQueryの詳細

ではここからはjQueryの内容を1行ずつ説明していきます。

2行目

「windowがスクロールされたら以下の処理を実行する」という指定になります。

$(window).scroll(function() {
    //　ここに処理内容を記述
});

3行目

.each()で、「.fadein」が付いた要素1つずつに順番に処理を行うことを指定します。

$('.fadein').each(function(){

});

4行目

.offset().topで、ページの最上部から「.fadein」が付いた要素までの距離を取得して、変数positionに代入します。

var position = $(this).offset().top;

5行目

.scrollTop()で、スクロールした量を取得して、変数scrollに代入します。

var scroll = $(window).scrollTop();

6行目

.height()で、ウィンドウの高さを取得して、変数windowHeightに代入します。

var windowHeight = $(window).height();

7〜9行目

スクロール量が、「ページ最上部から要素までの距離」-「ウィンドウの高さ」を超えた時、つまりスクロール量が要素の位置を過ぎた瞬間、「.fadein」が付いた要素にactiveクラスが付きます。

そしてCSSに記述したアニメーションが開始します。

if (scroll > position - windowHeight){
  $(this).addClass('active');
}

しかし、これだと要素が画面内に入ってすぐにアニメーションが開始されてしまうので、少し余裕を持たせるために、以下の様に記述することが多いです。

if (scroll > position - windowHeight + 200){
  $(this).addClass('active');
}

数値をいじることで、アニメーション開始位置を変更できます。

まとめ

さりげないアニメーションひとつ加えるだけで、サイトのオシャレ度が一気に上がることは多々あります。今回紹介したアニメーションだけでも、効果は抜群ですので、是非取り入れてみてください。

この記事の内容を応用すると、いろんな方法で要素を表示できますよ。