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

目次

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

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

出力結果

htmlのコード

<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>

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);
}

javascriptのコード

$(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');
			}
		});
	});
});

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

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

順に見ていきましょう。

➀:共通クラスをつける

まず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);
}

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

そしてフェードイン用のクラスをつけると「透明度1」+「表示」+「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');
			}
		});
	});
});

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

最後に色んな方向からフェードインするサンプルと、コピペ用コードを紹介していきます!

  • 下からフェードイン
  • 上からフェードイン
  • 左からフェードイン
  • 右からフェードイン
  • 上下左右からフェードイン

順に見ていきましょう。

下からフェードイン

出力結果

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);
}

javascriptのコード

$(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,jsは同じ)

出力結果

cssのコード

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

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

左からフェードイン(html,jsは同じ)

出力結果

cssのコード

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

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

左右どちらからフェードインする場合は、transformの値をXにしてあげましょう。

右からフェードイン(html,jsは同じ)

出力結果

cssのコード

main {
  overflow: hidden;
}

.box__item {
    width: 100%;
}

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

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

先ほど同様、translateの値をXにします。

ただ、右からフェードインの場合は注意が必要。

というのも要素の横幅によっては横スクロールが生じてしまうため。mainタグに対して「overflow: hidden;」をかけるなどの対策をおすすめします。

上下左右からフェードイン

出力結果

htmlのコード

<main>
    <div class="box">
        <div class="box__item js-fadeBottom">フェードインするよ!</div>
    </div>
    <div class="box">
        <div class="box__item js-fadeTop">フェードインするよ!</div>
    </div>
    <div class="box">
        <div class="box__item js-fadeLeft">フェードインするよ!</div>
    </div>
    <div class="box">
        <div class="box__item js-fadeRight">フェードインするよ!</div>
    </div>
</main>

cssのコード

// 下からフェードイン
.js-fadeBottom {
    opacity: 0;
    visibility: hidden;
    transform: translateY(80px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeBottom.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}


// 上からフェードイン
.js-fadeTop {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-80px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeTop.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}


// 左からフェードイン
.js-fadeLeft {
    opacity: 0;
    visibility: hidden;
    transform: translateX(80px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeLeft.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}


// 右からフェードイン
.js-fadeRight {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-80px);
    transition: opacity 1s,visibility 1s, transform 1s;
}
.js-fadeRight.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateX(0px);
}

javascriptのコード

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

上下左右など色んな方向からのフェードインアニメーションが複数ある時は、コードの数を増やします。

方向別用の「クラス」「css」を記述。

そして下記のように、クラスそれぞれに対してjsが発動するように指定します↓

$('.js-fadeBottom,.js-fadeTop,.js-fadeLeft,.js-fadeRight').each(function(){

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

  • フェードインさせる場所に共通のクラスをつける
  • フェードイン前後のCSSを記述
  • スクロールしたらクラスをつける記述をする

フェードインアニメーションはよく使うので覚えておきましょう!

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP