【jQuery、アニメーション】上下左右からフェードインで要素を表示させる方法を解説。

なやむくん

ただのフェードインではなく、いろんな方向からフェードインさせたい

なやむさん

フェードインにもう一つ工夫を加えたい…

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

フェードインさせて要素を表示させるサイトをよく見ますが、シンプルにかっこいいですよね。

しかし、ただのフェードインで表示させるのもいいけどさらに動きを加えたいと思っている方もいるのではないでしょうか。

今回は上から下、下から上、左から右、右から左に移動しながらフェードインさせる方法を解説します。

みつた

フェードインにさらに動きを加える事でかっこよさが増します！

本記事の前にスクロールして要素をフェードインさせる方法について学びたい方は下記からどうぞ。

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

それではまず初めに完成例を紹介していきます。

See the Pen フェードイン【上下左右】 by koutarou mori (@koutarou-mori) on CodePen.

よろこびくん

かっこいいですね…！自分のサイトに実装したいです。

この動き自体はたいした難しいことではないので、臆することなくこの記事を読んでマスターしてほしいと思います。

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

HTMLの解説

HTMLのコードは以下です。

<body>
    <p class="txt">下にスクロールするとブロックがフェードインします。</p>
    <div class="block fadeIn">
        その場で<br>フェードイン
    </div><!-- /.block -->
    <div class="block fadeInTop">
        下から上に移動しながら<br>フェードイン
    </div><!-- /.block -->
    <div class="block fadeInBottom">
        上から下に移動しながら<br>フェードイン
    </div><!-- /.block -->
    <div class="block fadeInLeft">
        右から左に移動しながら<br>フェードイン
    </div><!-- /.block -->
    <div class="block fadeInRight">
        左から右に移動しながら<br>フェードイン
    </div><!-- /.block -->
</body>

今回完成例では「その場」でフェードイン、「下から上」に移動しながらフェードイン、「上から下」に移動しながらフェードイン、「右から左」に移動しながらフェードイン、「左から右」に移動しながらフェードインを紹介しています。

「その場」にはfadeInクラス、「下から上」にはfadeInTopクラス、「上から下」にはfadeInBottomクラス、「右から左」にはfadeInLeftクラス、「左から右」にはfadeInRightクラスをそれぞれ指定しています。

このクラスそれぞれに移動させるためのCSSが記述されています。

みつた

次のCSSの解説ではどのようにして移動させているかを解説していきます。

CSSの解説

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

.txt {
    margin-bottom: 800px;
}
/* フェードインさせる要素 */
.block {
    width: 250px;
    height: 250px;
    color: #fff;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
    margin-bottom: 100px;
}
/* その場でフェードイン */
.fadeIn {
    opacity: 0; /* 最初は非表示にしておく */
    transition: all 1s; /* 動きを滑らかに */
}
/* 下から上に */
.fadeInTop {
    opacity: 0; /* 最初は非表示にしておく */
    transform: translateY(100px);/* 予め要素を下に配置 */
    transition: all 1s; /* 動きを滑らかに */
}
/* 上から下に */
.fadeInBottom {
    opacity: 0; /* 最初は非表示にしておく */
    transform: translateY(-100px);/* 予め要素を上に配置 */
    transition: all 1s; /* 動きを滑らかに */
}
/* 右から左 */
.fadeInLeft {
    opacity: 0; /* 最初は非表示にしておく */
    transform: translateX(100px);/* 予め要素を右に配置 */
    transition: all 1s; /* 動きを滑らかに */
}
/* 左から右 */
.fadeInRight {
    opacity: 0; /* 最初は非表示にしておく */
    transform: translateX(-100px);/* 予め要素を左に配置 */
    transition: all 1s; /* 動きを滑らかに */
}
/* フェードイン用のクラス */
.fadeInAnime {
    opacity: 1;
    transform: translate(0);
}

フェードインに関するCSSに絞って解説していきます。

もえるくん

よーし、頑張ります！

その場でフェードイン

/* その場でフェードイン */
.fadeIn {
    opacity: 0; /* 最初は非表示にしておく */
    transition: all 1s; /* 動きを滑らかに */
}

その場でフェードインさせる場合はまず、フェードイン前に非表示にしておきたいのでopacity: 0;にします。

そしてフェードインさせる際の動きの変化を滑らかにしたいのでtransition: all 1s;を指定します。

この指定をすると、非表示の要素が表示するまでを１秒間かけて実行するというものです。

みつた

このopacityプロパティとtransitionプロパティはフェードインを実装する上でセットで覚えておきましょう。

ポイント

〇　フェードインさせたい要素にはopacity: 0;を指定して非表示（透明）にする

〇　非表示状態から表示の状態に変化させる動きを滑らかにするためにtransitionプロパティを指定する

下から上に移動しながらフェードイン

/* 下から上に */
.fadeInTop {
    opacity: 0; /* 最初は非表示にしておく */
    transform: translateY(100px);/* 予め要素を下に配置 */
    transition: all 1s; /* 動きを滑らかに */
}

opacityプロパティとtransitionプロパティの指定は変わりません。

注目してほしいのはtransform: translateY(100px);です。

transform: translateY(100px);はY軸方向を指定しており、初期位置から100px分移動させるというものです。

非表示の状態で100px下に移動させておき、スクロールしたときに指定の高さまで来たらtransform: translate(0);で元の位置に戻すようにすることでフェードインの動きを実装しています。

みつた

transformプロパティのtranslateY()関数に正の整数を指定すると下に、負の整数を指定すると上に移動させることができます。

図にすると以下のようになります。

今回の動きではtransformプロパティの translate()関数で指定した位置がスタートということになり、初期位置がゴールになります。

このようにフェードインの動きはtransformプロパティのtranslate()関数を使用しています。

もえるくん

移動させた位置がスタート地点、初期位置がゴール地点と考えておけば理解しやすいかも！

上から下に移動しながらフェードイン

/* 上から下に */
.fadeInBottom {
    opacity: 0; /* 最初は非表示にしておく */
    transform: translateY(-100px);/* 予め要素を上に配置 */
    transition: all 1s; /* 動きを滑らかに */
}

opacityプロパティとtransitionプロパティの指定は変わりません。

次は上から下にということですので、transformプロパティのtranslateY()関数には‐100pxを指定して初期位置から上に移動させておきます。

これでtransform: translate(0);で元の位置に戻すようにすると、上から下の動きが実現できます。

右から左に移動しながらフェードイン

/* 右から左に */
.fadeInLeft {
    opacity: 0; /* 最初は非表示にしておく */
    transform: translateX(100px);/* 予め要素を右に配置 */
    transition: all 1s; /* 動きを滑らかに */
}

opacityプロパティとtransitionプロパティの指定は変わりません。

transformプロパティのtranslateX()関数を使って、横の動きを付けていきます。

この場合はtranslateX()関数の引数に100pxを指定して右方向に要素を配置します。

みつた

transformプロパティのtranslateX()関数も正の整数を指定すると右に、負の整数を指定すると左に移動させることができます。

これでtransform: translate(0);で元の位置に戻すようにすると、右から左の動きが実現できます。

左から右に移動しながらフェードイン

/* 左から右に */
.fadeInRight {
    opacity: 0; /* 最初は非表示にしておく */
    transform: translateX(-100px);/* 予め要素を左に配置 */
    transition: all 1s; /* 動きを滑らかに */
}

opacityプロパティとtransitionプロパティの指定は変わりません。

今回は左から右にということですのでtranslateX()関数の引数に-100pxを指定して左方向に要素を配置します。

これでtransform: translate(0);で元の位置に戻すようにすると、左から右の動きが実現できます。

もえるくん

上下左右の動きの仕組みが分かりました！

初期位置に戻すクラス（フェードインさせるクラス）の指定

/* フェードイン用のクラス */
.fadeInAnime {
    opacity: 1;
    transform: translate(0);
}

上下左右に移動させスタート位置に配置する方法をこれまで説明しました。

最後に初期位置に戻す（フェードインさせる）クラスを用意します。

まず非表示から表示の状態にするので、opacity: 1;を指定します。

そして要素を初期位置に戻すためにtransform: translate(0);を指定します。

このクラスをフェードインさせる要素に一定の高さまでスクロールしたら付与させるように、jQueryで制御していきます。

ポイント

〇　transformプロパティのtranslateY()関数を使って、要素を上下に移動させる

〇　translateY()関数の引数に正の整数を指定すると下に、負の整数を指定すると上に移動できる

〇　transformプロパティのtranslateX()関数を使って、要素を左右に移動させる

〇　translateX()関数の引数に正の整数を指定すると右に、負の整数を指定すると左に移動できる

〇　スタート位置をtransformプロパティで移動した位置、初期位置をゴール位置

〇　初期位置に戻すクラスには、opacity: 1とtransformプロパティにtranslate(0)を指定する

みつた

ここまでがCSSの解説です。フェードインの動きの作り方は理解できましたでしょうか？

なやむくん

ここまでは何とか…！でもJSは苦手なので不安です…。

jQueryの解説

$(function () {
    // ウィンドウをスクロールしたら…
    $(window).scroll(function () {
        // ウィンドウの高さを取得
        const wHeight = $(window).height();
        // スクロールした量を取得
        const wScroll = $(window).scrollTop();
        //それぞれのフェードインクラスに繰り返し指定
        $(".fadeIn,.fadeInTop,.fadeInBottom,.fadeInLeft,.fadeInRight").each(function () {
                // それぞれのフェードインクラスのウィンドウからの高さを取得
                const bPosition = $(this).offset().top;
            // その数値にウィンドウの高さを引き、最後に200pxを足す
            if (wScroll > bPosition - wHeight + 200) {
                // フェードインさせるクラスを付与
                $(this).addClass("fadeInAnime");
            }
        });
    });
});

こちらは繰り返し指定しているクラスが違うだけで、内容は同じなのでここでの説明は割愛します。

内容を知りたいという方は以下の記事からご確認ください。