【jQuery】スクロール時のフェードイン【サンプル・コピペコード付き】

記事内に広告を含みます

パソ君

・スクロールしたら下からフワッと出現するのってどう実装するの？

こんな疑問にお答えします。

スクロールしたらフワッとフェードインして表示するサイトが、最近ではよくありますよね。

下記みたいなやつ↓

これ実はjQueryとcssを使えば、簡単に実装できちゃいます。

ジト

すぐにできるよ！

ということで、この記事では「スクロール時のフェードイン」について解説していきます！

この記事でわかること

・スクロール時のフェードイン【やり方】
・スクロール時のフェードイン【サンプル・コピペコード】

ちなみにjQueryプラグインで実装する方法もあります。
こちらの方が簡単かも↓

2023年1月12日【解説】jquery.inviewの使い方【サンプル・コピペコード付き】

【jQuery】スクロール時のフェードイン【やり方】
【jQuery】スクロール時のフェードイン【サンプル・コピペコード付き】
【jQuery】スクロール時のフェードイン【サンプル・コピペコード付き】：まとめ

【jQuery】スクロール時のフェードイン【やり方】

スクロールしたらフワッとフェードインして表示するデモが下記になります。

See the Pen フェードイン by jito-coder (@jito-coder) on CodePen.

<main>
    <div class="box">
        <div class="box__item js-fade">フェードインするよ！</div>
    </div>
    <div class="box">
        <div class="box__item js-fade">フェードインするよ！</div>
    </div>
    <div class="box">
        <div class="box__item js-fade">フェードインするよ！</div>
    </div>
    <div class="box">
        <div class="box__item js-fade">フェードインするよ！</div>
    </div>
    <div class="box">
        <div class="box__item js-fade">フェードインするよ！</div>
    </div>
</main>

.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

$(function(){
	$(window).scroll(function (){
		$('.js-fade').each(function(){
			var pos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > pos - windowHeight + 100){
				$(this).addClass('scroll');
			}
		});
	});
});

コードの解説として重要な点が、こちらになります↓

共通クラスをつける
フェードイン前後の記述をする
スクロールしたらクラスをつける記述をする

順に見ていきましょう。

➀：共通クラスをつける

まずHTMLにて、フェードインさせる場所に共通のクラスをつけてきます。

<div class="box">
    <div class="box__item js-fade">フェードインするよ！</div>
</div>
<div class="box">
    <div class="box__item js-fade">フェードインするよ！</div>
</div>

今回でいうと「js-fade」ですね。
このクラスをつける要素がフェードインする対象となります。

ジト

「js-」とついておけば、JavaScript用につけてるクラスだとわかりやすいよ！

➁：フェードイン前後の記述をする

次にCSSにてフェードイン前後の反映記述をします。

// フェードイン前
.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

// フェードイン後
.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}

初期値は「透明度０」＋「非表示」＋「Y軸に50pxずらす」を指定。

そしてフェードイン用のクラスをつけると「透明度１」＋「表示」＋「Y軸0pxの位置に戻す」を指定します。

transitionをつけることで、1秒間かけてフェードインするように指定。
念のため「transition-property」もつけておきます。

③：スクロールしたらクラスをつける記述をする

あとは「scroll」というクラスを、「js-fade」の要素にスクロール時につければ実装可能。

それはjQueryにて下記コードで実装いたします。

$(function(){
	$(window).scroll(function (){
		$('.js-fade').each(function(){
			var pos = $(this).offset().top;
			var scroll = $(window).scrollTop();
			var windowHeight = $(window).height();
			if (scroll > pos - windowHeight + 100){
				$(this).addClass('scroll');
			}
		});
	});
});

たぶん初見だとこのコードを見ても、わけが分からないかと思います。僕もそうだった。。

めちゃくちゃ簡単に説明すると
「ウインドウ画面をスクロール時に、.js-fadeのクラスを持つ要素が、もしも100px以上画面内に入ってきたら、.scrollというクラスを付与する」
という意味。

そして.eachメソッドを使うことで、要素それぞれに対して指定することができます。つまり一気にすべての要素に「.scroll」クラスがつかないようにできるということ。

細かく説明すると下記の感じ↓

$(function(){
    // ウインドウをスクロールしたら
	$(window).scroll(function (){
        // .js-fadeのクラスを持つ要素（それぞれに対して）
		$('.js-fade').each(function(){
            // この要素のスクロール位置（上から）
			var pos = $(this).offset().top;
            // ウインドウのスクロール量（上から）
			var scroll = $(window).scrollTop();
            // ウインドウの縦幅
			var windowHeight = $(window).height();
            // ウインドウのスクロール量（上から）が
            // この要素のスクロール位置 - ウインドウの縦幅 + 100pxより大きい場合
			if (scroll > pos - windowHeight + 100){
                // .scrollというクラス.js-fadeに付与する
				$(this).addClass('scroll');
			}
		});
	});
});