home > blog > css > スクロールでフェードイン表示させる方法

スクロールでフェードイン表示させる方法

DEMOはこちら

スクロールしてください。
ふわっと表示されます。

フェードイン

手順はこちら

① jqueryを導入

jqueryを使うので、jqueryを導入しましょう。
導入する方法は複数ありますが、一番楽なのは「jQueryのCDNを使う方法」だと思います。
※オフラインで使いたい場合はjqueryファイルをダウンロードして使うやり方で。（「jquery」「導入」でググればでてきます）

▼僕は下記のような「jQueryのCDN」を</footer>直後に記述しています。

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

ここでは簡単な説明とさせていただきます。詳しくは「jquery」「導入」で調べてみてください。

② jQueryを記述していく

$(function () {
    $(window).scroll(function () {
        var winH = $(window).height();
        var sAmount = $(window).scrollTop();
        $('.sFade').each(function () {
            var itemPosition = $(this).offset().top;
            if(sAmount > itemPosition - winH + 100) {
                $(this).addClass("fadeIn");
            }
        });
    });
});

▼上記の記述では下記のような処理を行なっています。

コードの解説

▼ クリックしたら解説が表示されます。

$(function () {
jQueryの開始時に記述するもの。
$(function() { /*ここに処理を記述*/ });
　$(window).scroll(function () {
「ブラウザの表示領域をスクロールしたとき、{} 内の処理が実行される。

$(window)
→ ブラウザの表示領域を表しています。（セレクタ）

scroll()
→ 解説は下記（メソッド）

▼スクロールした時に { } 内の処理が実行されます。
→ scroll(function(){ /*処理を記述*/ });

　　var winH = $(window).height();
「$(window).height();」と書くことで、「ブラウザの表示領域の高さを取得」しています。
取得した値を変数「winH」に代入。

var winH
→ 変数「winH」を宣言。

height()
→ 高さを取得するメソッド。
→ $(セレクタ).height();」でセレクタの高さを取得。
　　var sAmount = $(window).scrollTop();
ブラウザの画面をスクロールした時の位置（スクロール量）を取得して、変数「sAmount」に代入。

var sAmount
→ 変数「sAmount」を宣言。

scrollTop()
→ ブラウザの画面をスクロールした時の位置（スクロール量）を取得するメソッド。
→「$(セレクタ).scrollTop();」でセレクタをスクロールした時の位置（スクロール量）を取得。
　　$('.sFade').each(function () {
「.sFade」が付与されている要素に対して、繰り返し処理を実行。

each()
→ 繰り返し処理を行うメソッド

$(セレクタ).each(function () { /*ここに処理を記述*/　});
→ セレクタに対して、繰り返し{}内の処理を実行します。
　　　var itemPosition = $(this).offset().top;
「.sFade」のついた要素の左角を原点とした縦の位置を取得し、それを変数「itemPosition」に代入。

$(this)
→ 今、処理されている要素のこと。ここでは「.sFade」になります。

$(this).offset().top;
「$(this) = .sFade」の縦位置（Y座標）のみを取得
　　　if(sAmount > itemPosition – winH + 100) {
if(スクロール量 > 対象要素の縦位置の値 – 表示領域の高さ + 100) {

「対象要素の縦位置の値 – 表示領域の高さ + 100」より「スクロール量」の方がおおきくなったら処理実行（true）
下にスクロールしていくと「スクロール量は増える」、「対象となる要素の縦位置の値は減る」。
「+100」でアニメーションが実行される場所を調整しています。ここの数字を変えれば実行される位置を変えられます。

　　　　$(this).addClass("fadeIn");
「$(this) = .sFade」に「.fadeIn」を与える。
　　　}
　　});
　});
});

③ HTML要素にフェードイン用のクラスをつける

<p class="sFade upDown">フェードイン</p>
<div class="sFade upDown">
<img src="../images/common/sample_img_1.jpg" alt="">
</div>

④ フェードインアニメーションのCSSを記述

/*フェードインさせたい要素を消します*/
.sFade {
	opacity: 0;
}

/*アニメーションを設定*/
.fadeIn {
	animation-name: fadeIn;
	animation-duration: 5s;
	animation-fill-mode: forwards;
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
		transform: translate(0);
	}
}

/*上下の動きを指定*/
.upDown {
	transform: translateY(-100px);
}

.downUp {
	transform: translateY(100px);
}


/*左右の動きを指定*/
.slideR {
	transform: translateX(200px);
}

.slideL {
	transform: translateX(-200px);
}

//左右のスクロールバーを消す
.overflowH {
	overflow: hidden;
}
RETURN
top