などの疑問や悩みを解決してまいります。
ページのコンテンツをフェードインで表示させることができれば、よりサイトにリッチさを出すことができます。
今回はCSSのみでフェードインをさせる方法と、jQueryを使用してスクロールに応じてフェードインをさせる方法を解説します。
CSSアニメーションの基本@keyframeとanimetionプロパティについての解説記事はこちら
-
-
【CSSアニメーション】@keyframesとanimationプロパティについて解説します。
続きを見る
↓↓ 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;を指定して透明状態にして見えないようにします。
opacity - CSS: カスケーディングスタイルシート | MDN
次にtransformプロパティのtranslate()関数を使用して、要素の位置を指定します。
translate() - CSS: カスケーディングスタイルシート | MDN
例えば下から上にフェードインさせる要素には初期位置よりも下にあってほしいので、transform: translateY(100px);を指定して要素を初期位置から下に100pxの位置に移動させています。
opacity: 0;で透明にして、transform: translateY(100px);を使って要素を初期位置から移動させている状態がスタート位置になります。
あとは@keyframeで要素を非表示から表示に切り替えて、位置も元の位置に戻してあげることでフェードインが完成する仕組みです。
なので@keyframeの記述としては、100%内に要素を表示させるためにopacity: 1;を指定して、元の位置に戻すためにtransform: translate(0);を指定してあげるだけです。
横の動きは 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の解説
今回スクロールの量に応じてフェードインさせるクラスを付与する内容を記述しています。
コードは以下の通りです。
$(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;であらかじめ要素を非表示にする
〇 transformプロパティのtranslate()関数を指定して、フェードインのスタート位置に移動させる
〇 @keyframeの100%に要素を表示させるためのopacity: 1;と、要素の位置を元に戻すためのtransform: translate(0);を指定する
〇 $(window).height();でウィンドウの高さを取得する
〇 $(window).scrollTop();でスクロール量を取得する
〇 $(this).offset().top;で、フェードインさせる要素の高さを取得する
〇 条件式は{フェードインさせる要素の高さ > スクロール量 - ウィンドウの高さ + 任意の数値 }でフェードインさせるタイミングを指定する
