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

TOP >
JavaScript >

JavaScript Web制作アニメーション

2024年4月15日

※本記事は広告が含まれる場合があります。

なやむくんスクロールしたらコンテンツをフェードインさせたいなやむさんスッと要素を表示させてかっこいいサイトを作りたい

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

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

しかし、アニメーションの動きは難しいと思っていませんか？

みつたスクロールに連動してフェードインさせる・・・想像するだけで難しそうですよね

それでも自分のサイトに、他の方のサイトに実装したいと考える方に向けてできるだけわかりやすく解説していきたいと思います。

本記事の目次

1 まずは完成形を見てみましょう
2 HTMLの解説
3 CSSの解説
4 jQueryの解説
- 4.1 $(window).scroll(function () {}　→　スクロールした後の処理
- 4.2 const wHeight = $(window).height();　→　ウィンドウの高さを取得
- 4.3 const wScroll = $(window).scrollTop();　→　スクロールした量の取得
- 4.4 $(".block").each(function () {}　→　繰り返し処理
- 4.5 const bPosition = $(this).offset().top;　→　指定した要素の高さの取得
- 4.6 if (wScroll > bPosition - wHeight + 200) {}　→　条件式の解説
- 4.7 $(this).addClass("fadeIn");　→　フェードイン用のクラスを付与する
5 フェードインさせる方法まとめ

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

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

See the Pen フェードイン by koutarou mori (@koutarou-mori) on CodePen.

このようにスクロールして一定の高さに到達するとブロックがフェードインして表示させます。

みつたJQueryがややこしいですが、細かく砕いて解説していきます！

HTMLの解説

<body> <p class="txt">下にスクロールするとブロックがフェードインします。</p> <div class="block"></div> <div class="block"></div> <div class="block"></div> </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プロパティも指定します。

みつた今回は値に2s（2秒）を指定して、2秒間かけてopacity: 0;からopacity: 1;に変更するようにしています。

ポイント

〇　フェードインさせたい要素には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"); } }); }); }); みつたjQueryは一見ややこしいですが、一つ一つの役割が理解できれば何をしているかわかります！ $(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の条件式だけでは、フェードインさせる要素の位置が高すぎることになります。

なのでこの条件式に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;で、フェードインさせる要素の高さを取得する

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

今回はその場でフェードインさせる方法を解説しましたが、下から上に動きながらフェードインさせる方法や、左から右に流しながらフェードインさせる方法、またフェードインとフェードアウト両方実装する方法もあるのでこれらもぜひ試してみてください。

Twitter
Share
Pocket
Hatena
Pinterest
LINE

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

📎📎📎📎📎📎📎📎📎📎

BOT