などの疑問や悩みを解決してまいります。
フェードインさせて要素を表示させるサイトをよく見ますが、シンプルにかっこいいですよね。
しかし、アニメーションの動きは難しいと思っていませんか？
それでも自分のサイトに、他の方のサイトに実装したいと考える方に向けてできるだけわかりやすく解説していきたいと思います。
まずは完成形を見てみましょう
それでは解説に入る前に完成例とコードを紹介します。
See the Pen フェードイン by koutarou mori (@koutarou-mori) on CodePen.
このようにスクロールして一定の高さに到達するとブロックがフェードインして表示させます。
HTMLの解説
<body>
<p class="txt">下にスクロールするとブロックがフェードインします。</p>
<div class="block"></div><!-- /.block -->
<div class="block"></div><!-- /.block -->
<div class="block"></div><!-- /.block -->
</body>HTMLは特に重要な記述はありません。
今回はフェードインの動きをわかりやすくするため正方形のブロックを３つ表示しています。
CSSの解説
.txt {
margin-bottom: 800px;
}
/* フェードインさせる要素 */
.block {
width: 250px;
height: 250px;
background-color: #333;
margin-bottom: 100px;
opacity: 0; /* 最初は非表示にしておく */
transition: all 2s; /* 動きを滑らかに */
}
/* フェードイン用のクラス */
.fadeIn {
opacity: 1;
}CSSでは、まずフェードインさせたい要素をopacity: 0;で透明の状態にします。
そしてfadeInクラスが付与されたら表示させたいので、fadeInクラスにopacity: 1;を指定します。
またopacity: 0;からopacity: 1;に変わる際の動きに滑らかさが欲しいので、フェードインさせたい要素にはopacity: 0;とセットでtransitionプロパティも指定します。
ポイント
〇 フェードインさせたい要素にはopacity: 0;を指定して非表示にしておく
〇 フェードインさせるためのクラスを用意して、opacity: 1;を指定する
〇 opacity: 0;からopacity: 1;の変化に滑らかさをつけるためにフェードインさせる要素にtransitionプロパティを指定する
jQueryの解説
$(function () {
// ウィンドウをスクロールしたら…
$(window).scroll(function () {
// ウィンドウの高さを取得
const wHeight = $(window).height();
// スクロールした量を取得
const wScroll = $(window).scrollTop();
// それぞれのblockクラスに対して…
$(".block").each(function () {
// それぞれのblockクラスのウィンドウからの高さを取得
const bPosition = $(this).offset().top;
// スクロールした量が要素の高さを上回ったら
// その数値にウィンドウの高さを引き、最後に200pxを足す
if (wScroll > bPosition - wHeight + 200) {
$(this).addClass("fadeIn");
}
});
});
});
$(window).scroll(function () {} → スクロールした後の処理
「ウィンドウをスクロールしたらどうするか」という宣言です。
{}の中に処理を記述することでスクロールを開始すると同時に様々な処理が行われます。
const wHeight = $(window).height(); → ウィンドウの高さを取得
wHeightという変数を用意して、この中に$(window).height();の値を入れています。
$(window).height();とはウィンドウの高さを指定しています。
const wScroll = $(window).scrollTop(); → スクロールした量の取得
wScrollという変数を用意して、この中に$(window).scrollTop();の値を入れています。
$(window).scrollTop();とはスクロールした量を指定しています。
$(".block").each(function () {} → 繰り返し処理
blockクラスに対して繰り返し処理を実行するという宣言です。
この場合の繰り返し処理というのは指定した要素が複数ある場合、それぞれに処理を指定するということです。
const bPosition = $(this).offset().top; → 指定した要素の高さの取得
bPositionという変数を用意して、この中に$(this).offset().top;の値を入れています。
$(this).offset().top;とはウィンドウの一番上からその要素（今回はblockクラス）までの距離を取得しています。
if (wScroll > bPosition - wHeight + 200) {} → 条件式の解説
こちらのif文の計算式がややこしいかもです。
それぞれの変数についておさらいしましょう。
〇 wHeight = ウィンドウの高さ
〇 wScroll = スクロール量
〇 bPosition = ウィンドウから見た要素の高さ
変数のおさらいができましたら、以下を見てください。
変数はそれぞれ以下の図のようなイメージになります。
フェードインさせたい要素が800pxの高さにあると想定して、この条件式について説明していきます。
wScroll > bPosition
スクロールした量がウィンドウから見た要素の高さよりも上回った場合の条件です。
こちらの条件式を図で表すと以下のようになります。
このように上記のwScroll > bPositionの条件式だけでは、フェードインさせる要素の位置が高すぎることになります。
なのでこの条件式にwHeightを追加します。
wScroll > bPosition - wHeight
先程の条件式に- wHeightを追加しました。
この条件式でどのようになるか図で見てみると以下のようになります。
フェードインさせる要素は下になりましたが、今のままでは画面内にスクロールする前にフェードインしてしまう状態になります。
この問題を解決するため最後に+ 200を追加しています。
wScroll > bPosition - wHeight + 200
最後に任意の数値をプラスすることでフェードインする位置を調節することができます。
条件式の内容を図で表すと以下のようになります。
このように自分好みの箇所でフェードインさせることが可能になります。
$(this).addClass("fadeIn"); → フェードイン用のクラスを付与する
blockクラスに対して、fadeInクラスを付与するという記述になります。
条件式の指定でフェードインさせる要素の位置を決めたら、CSSで設定したフェードイン用のクラスをaddClass関数で付与させる記述をしたら完成です。
フェードインさせる方法まとめ
ポイント
〇 フェードインさせたい要素にはopacity: 0;を指定して非表示にしておく
〇 フェードインさせるためのクラスを用意して、opacity: 1;を指定する
〇 opacity: 0;からopacity: 1;の変化に滑らかさをつけるためにフェードインさせる要素にtransitionプロパティを指定する
〇 $(window).height();でウィンドウの高さを取得する
〇 $(window).scrollTop();でスクロール量を取得する
〇 $(this).offset().top;で、フェードインさせる要素の高さを取得する
〇 条件式は{フェードインさせる要素の高さ > スクロール量 - ウィンドウの高さ + 任意の数値 }でフェードインさせるタイミングを指定する
今回はその場でフェードインさせる方法を解説しましたが、下から上に動きながらフェードインさせる方法や、左から右に流しながらフェードインさせる方法、またフェードインとフェードアウト両方実装する方法もあるのでこれらもぜひ試してみてください。
