JQueryで作る汎用パーツ編⑦

テキスト目次 > JQueryの基礎 > JQueryで作る汎用パーツ編⑦

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

目次

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

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

出力結果

<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>
HTML
.js-fade {
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: opacity 1s,visibility 1s, transform 1s;
}

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
CSS
$(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');
			}
		});
	});
});
JavaScript

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

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

今回でいうと「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);
}
CSS

初期値は「透明度０」＋「非表示」＋「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');
			}
		});
	});
});
JavaScript

おそらく初見だとこのコードを見ても、わけが分からないかと思います。

簡単に説明すると
「ウインドウ画面をスクロール時に、.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');
			}
		});
	});
});
JavaScript

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

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

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

順に見ていきましょう。

下からフェードイン

出力結果

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

.scroll {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
}
CSS
$(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');
			}
		});
	});
});
JavaScript

上からフェードイン（html,jsは同じ）

出力結果

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

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

左からフェードイン（html,jsは同じ）

出力結果

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

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

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

右からフェードイン（html,jsは同じ）

出力結果

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

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

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

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

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

出力結果

<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>
HTML
// 下からフェードイン
.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);
}
CSS
$(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');
			}
		});
	});
});
JavaScript

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

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

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

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

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

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

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

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP