【jQuery】スクロールしていくと要素がフェードインで表示させる方法

ページをスクロールしていくと要素がフェードインで表示していくwebサイトをよく見かけます。

今回はページをスクロールしていくと要素がフェードインで表示していく方法を紹介していきたいと思います。

スクロールしていくと要素がフェードインで表示させる方法

下記の4つのパターンでフェードインして表示させる方法を紹介します。

テキストと画像をフェードインして表示していきます。

html

<section class="section">
<h2>通常のフェードイン</h2>
<div class="scroll-anime">テキスト</p>
<div class="scroll-anime"><img src="../img/1.jpg"></div>

<h2>上から下に要素をフェードインさせる</h2>
<div class="scroll-anime updown">テキスト</p>
<div class="scroll-anime updown"><img src="../img/1.jpg"></div>

<h2>下から上に要素をフェードインさせる</h2>
<div class="scroll-anime downup">テキスト</div>
<div class="scroll-anime downup"><img src="../img/1.jpg"></div>

<h2>右から左に要素をフェードインさせる</h2>
<div class="scroll-anime slide-right">テキスト</dvi>
<div class="scroll-anime slide-right"><img src="../img/1.jpg"></div>

<h2>左から右に要素をフェードインさせる</h2>
<div class="scroll-anime slide-left">テキスト</div>
<div class="scroll-anime slide-left"><img src="../img/1.jpg"></div>
</section>

css

.section{text-align: center;}
.scroll-anime{
	opacity: 0;
	overflow: hidden;
}

.fadeInDown {
	animation-name: fadeInDown;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes fadeInDown {
	0% {opacity: 0;}
	100% {
	opacity: 1;
	transform: translate(0);
	}
}

.updown {transform: translateY(-50px);}
.downup {transform: translateY(50px);}

.slide-right {transform: translateX(50px);}
.slide-left {transform: translateX(-50px);}

jQuery

jQuery(function () {
	jQuery(window).scroll(function () {
		var window_height = jQuery(window).height();
		var scroll_amount = jQuery(window).scrollTop();
		jQuery('.scroll-anime').each(function () {
			var target_position = jQuery(this).offset().top;
			if(scroll_amount > target_position - window_height + 100) {
				jQuery(this).addClass("fadeInDown");
			}
		});
	});
});

サンプル

補足

スクロールしたときに発火する

下記の記述はスクロールすると処理が発火します。

jQuery(window).scroll(function () {～});

ウィンドウの高さとウィンドウのスクロール位置を取得

var window_height = jQuery(window).height();
var scroll_amount = jQuery(window).scrollTop();

特定の位置までスクロールしたらクラスを付与する

var target_position = jQuery(this).offset().top;
if(scroll_amount > target_position - window_height + 100) {
	jQuery(this).addClass("fadeInDown");
}

横並び複数のパターン

次は横並びで複数の画像があるときには一つずつ時間差でフェードしていきます。