【CSSアニメーション】要素をフェードインさせる方法を解説します。

CSS Web制作 アニメーション

【CSSアニメーション】要素をフェードインさせる方法を解説します。

なやむくん
CSSだけで要素をフェードインさせたい
なやむさん
スクロールに応じてフェードインで要素を表示させたい

などの疑問や悩みを解決してまいります。

ページのコンテンツをフェードインで表示させることができれば、よりサイトにリッチさを出すことができます。

今回はCSSのみでフェードインをさせる方法と、jQueryを使用してスクロールに応じてフェードインをさせる方法を解説します。

みつた
フェードインだけならCSSだけで実装できますので、jQueryやJavascriptが苦手な方はぜひ!

CSSアニメーションの基本@keyframeとanimetionプロパティについての解説記事はこちら

おすすめ!
【CSSアニメーション】@keyframeとanimationプロパティについて解説します。
【CSSアニメーション】@keyframesとanimationプロパティについて解説します。

続きを見る

↓↓ jQueryを使用してフェードインさせる方法も解説しています。 ↓↓

jQueryを使用してフェードインアニメーションを実装する方法についての解説記事はこちら

おすすめ!
【jQuery、アニメーション】スクロールして要素をフェードインさせる方法を解説します。
【jQuery、アニメーション】スクロールして要素をフェードインさせる方法を解説します。

続きを見る

まずは完成形を見てみましょう

それでは解説に入る前に完成例とコードを紹介します。

See the Pen 【CSSアニメーション】フェードイン by koutarou mori (@koutarou-mori) on CodePen.

このようにCSSのみ使用してフェードインアニメーションを実装することができます。

それでは解説していきます。

HTMLの解説

<body>
    <div class="inner">
        <div class="fadeInBlock">
            <div class="block fadeInUp">
                下から上に移動しながら<br>フェードイン
            </div><!-- /.block -->
            <div class="block fadeInDown">
                上から下に移動しながら<br>フェードイン
            </div><!-- /.block -->
            <div class="block fadeInLeft">
                右から左に移動しながら<br>フェードイン
            </div><!-- /.block -->
            <div class="block fadeInRight">
                左から右に移動しながら<br>フェードイン
            </div><!-- /.block -->
        </div><!-- /.fadeInBlock -->
    </div><!-- /.inner -->
</body>

HTMLで注目する箇所は、フェードインさせるクラスの指定です。

下から上に移動しながらフェードインさせる要素にはfadeInUpクラス上から下に移動しながらフェードインさせる要素にはfadeInDownクラス右から左に移動しながらフェードインさせる要素にはfadeInLeftクラス左から右に移動しながらフェードインさせる要素にはfadeInRightクラスをそれぞれ指定しています。

みつた
あらかじめ動きに応じたクラスを作成しておきましょう。

CSSの解説

.inner {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}
.fadeInBlock {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
/* ブロックの共通CSS */
.block {
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    padding: 50px 20px;
}
/* 下から上に移動しながらフェードイン */
.fadeInUp {
    opacity: 0;
    transform: translateY(100px);
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* 上から下に移動しながらフェードイン */
.fadeInDown {
    opacity: 0;
    transform: translateY(-100px);
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* 右から左に移動しながらフェードイン */
.fadeInLeft {
    opacity: 0;
    transform: translateX(-100px);
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* 左から右に移動しながらフェードイン */
.fadeInRight {
    opacity: 0;
    transform: translateX(100px);
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}
/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}

注目すべきは、フェードインさせるクラスに指定しているCSSと@keyframeです。

まず共通としてフェードインさせる要素は最初非表示にしておきたいので、opacity: 0;を指定して透明状態にして見えないようにします。

次にtransformプロパティのtranslate()関数を使用して、要素の位置を指定します。

例えば下から上にフェードインさせる要素には初期位置よりも下にあってほしいので、transform: translateY(100px);を指定して要素を初期位置から下に100pxの位置に移動させています。

opacity: 0;透明にして、transform: translateY(100px);を使って要素を初期位置から移動させている状態がスタート位置になります。

あとは@keyframeで要素を非表示から表示に切り替えて、位置も元の位置に戻してあげることでフェードインが完成する仕組みです。

なので@keyframeの記述としては、100%内に要素を表示させるためにopacity: 1;を指定して、元の位置に戻すためにtransform: translate(0);を指定してあげるだけです。

よろこびくん
フェードイン理解できました!今回の例が「下から上」のフェードインでしたが、「横の動き」の場合はどうしたらいいですか?
みつた
translateY()関数はY軸を指定しているように、横の動きに関しては translateX()関数を指定してX軸を指定して横に動きを加えます。

横の動きは translateX()関数を指定して要素を横に移動させます。

例えば右から左にフェードインさせる要素には初期位置よりも右にあってほしいので、transform: translateX(100px);を指定して要素を初期位置から右に100pxの位置に移動させています。

@keyframeの記述は同じです。

また今回は translateY()関数と translateX()関数で要素を上下左右に移動させていますが、 translate()関数で第一引数はX軸、第二引数はY軸を一括で指定することができます。

例えばtransform: translate(-100px, 0);とすると、X軸に関係する第一引数に-100pxが指定されていますので、要素を左に100px移動させていることとなります。

みつた
以下がポイントです。ポイントさえ押さえておけば、フェードインは怖くありません!

ポイント

〇 フェードインさせる要素にはopacity: 0;あらかじめ要素を非表示にする

〇 transformプロパティのtranslate()関数を指定して、フェードインのスタート位置に移動させる

〇 @keyframeの100%に要素を表示させるためのopacity: 1;と、要素の位置を元に戻すためのtransform: translate(0);を指定する

スクロールに連動して要素をフェードインさせる方法

ここまではページの読み込み後にフェードインさせる方法について解説しました。

次はスクロール量に応じて要素をフェードインさせる方法を解説していきます。

以下が完成例です。

See the Pen 【CSSアニメーション】スクロールフェードイン by koutarou mori (@koutarou-mori) on CodePen.

HTMLは特に解説する部分がないので、CSSとスクロールに応じてフェードインさせるためjQueryについて解説します。

CSSの解説

以下がCSSのコードになります。

.txt {
    margin-bottom: 800px;
}

/* ブロックの共通CSS */
.block {
    width: 300px;
    height: 300px;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    margin-bottom: 100px;
}
/* 下から上に移動しながらフェードイン */
.fadeInUp {
    opacity: 0;
    transform: translateY(100px);
}
/* 上から下に移動しながらフェードイン */
.fadeInDown {
    opacity: 0;
    transform: translateY(-100px);
}
/* 右から左に移動しながらフェードイン */
.fadeInLeft {
    opacity: 0;
    transform:  translate(-100px, 0);
}
/* 左から右に移動しながらフェードイン */
.fadeInRight {
    opacity: 0;
    transform: translateX(100px);
}
/* フェードインアニメーション */
@keyframes fadeIn {
    0% {
    }
    100% {
        opacity: 1;
        transform: translate(0);
    }
}
/* フェードインさせるクラス */
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

スクロール量に応じてフェードインさせる仕組みは、フェードインさせる要素が一定の高さに来たらフェードインさせる要素それぞれに対し、fadeInクラスを付与することでアニメーションが開始するというものになります。

なのでフェードインさせるためのクラスを準備します。

今回でいうと以下の記述ですね。

/* フェードインさせるクラス */
.fadeIn {
    animation-name: fadeIn;
    animation-duration: 1s;
    animation-fill-mode: forwards;
}

.fadeInクラスにはこのようにアニメーションに関する指定を記述しています。

フェードインさせるためのコンテンツが一定の高さまでくるとこのクラスが付与されます。

付与されたコンテンツにanimetion-name: fadeIn;を指定することで、@keyframeが動いてアニメーションが開始できるようになっています。

よろこびくん
一定の高さまではクラスを付与させないことでフェードインさせるタイミングを調整しているんですね!
みつた
その通りです!付与させる条件は次のjQueryで解説します。

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();とはスクロールした量を指定しています。

みつた
スクロールした量というのは、何pxスクロールしたかを表します!

$(".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 のみではフェードインさせる要素の位置が上すぎる

このように上記のwScroll > bPositionの条件式だけでは、フェードインさせる要素の位置が高すぎることになります。

なのでこの条件式にwHeightを追加します。

wScroll > bPosition - wHeight

先程の条件式に- wHeightを追加しました。

この条件式でどのようになるか図で見てみると以下のようになります。

wScroll > bPosition - wHeight だけだとフェードインさせる要素が下すぎる

フェードインさせる要素は下になりましたが、今のままでは画面内にスクロールする前にフェードインしてしまう状態になります。

この問題を解決するため最後に+ 200を追加しています。

wScroll > bPosition - wHeight + 200

最後に任意の数値をプラスすることでフェードインする位置を調節することができます。

条件式の内容を図で表すと以下のようになります。

+200pxとすることで、ウィンドウの下から上に移動した箇所でフェードインさせるように調整

このように自分好みの箇所でフェードインさせることが可能になります。

みつた
ここまで理解できれば今回の内容はほぼマスターしたも同然です!

$(this).addClass("fadeIn"); → フェードイン用のクラスを付与する

blockクラスに対して、fadeInクラスを付与するという記述になります。

条件式の指定でフェードインさせる要素の位置を決めたら、CSSで設定したフェードイン用のクラスをaddClass関数で付与させる記述をしたら完成です。

本記事のまとめ

みつた
ここまでお疲れさまでした!本記事のまとめです。

ポイント

〇 フェードインさせる要素にはopacity: 0;あらかじめ要素を非表示にする

〇 transformプロパティのtranslate()関数を指定して、フェードインのスタート位置に移動させる

〇 @keyframeの100%に要素を表示させるためのopacity: 1;と、要素の位置を元に戻すためのtransform: translate(0);を指定する

〇 $(window).height();ウィンドウの高さを取得する

〇 $(window).scrollTop();スクロール量を取得する

〇 $(this).offset().top;で、フェードインさせる要素の高さを取得する

〇 条件式は{フェードインさせる要素の高さ > スクロール量 - ウィンドウの高さ + 任意の数値 }でフェードインさせるタイミングを指定する

  • この記事を書いた人
  • 最新記事

みつた

完全未経験&異業種から30歳の年でIT企業に転職。

Web系開発言語が好き。
どちらかというとバックエンドよりもフロントエンドが好き(現時点では…)

最近はサウナと観葉植物にハマっている。
野球が好きで一応投手。

-CSS, Web制作, アニメーション