HTML,CSS,JavaScriptでスクロールに応じて『下』からフェードインさせる方法

ブログやサイトなどで、スクロールした時に下から要素をフェードインさせて表示するための方法を記載します。

jQuery を使わずに純粋な JavaScript のみのコードを紹介します。

 

jQuery を用意していない所でも動きます。

基本的にコピペで動くと思います。

 

 

左右からフェードインさせる方法はこちら。

 

★コードについて解説

コピペで使えるように記載しますが、いつも通り解説のためのコメントも多めに書いておきます。

意味をわかって使った方がいいですからね。

★HTMLのコードと説明

h2 や div などのフェードインさせたい要素に、class を用意し CSS で用意する fadein というクラス名をつける。

<h2 id="concept" class="fadein">CONCEPT</h2>
<div class="fadein">
 (略)
</div>

 

★CSSのコードと説明

HTML で指定したクラス名の fadein の内容を記載。
opacity: 0.0(完全に透明)~1.0(完全に不透明)
→最初は透明にして、JavaScript 判定して表示するところまできたら不透明を設定する。
transform:translateY(Y方向の移動距離)
→現れてから定位置までの距離。今回は下からフェードインさせるので、24px。
transition:アニメーション色々な設定ができる。
→今回は秒数だけを指定。ほかにも細かく設定ができます。
外部リンク1:CSS3リファレンス
.fadein {
  opacity : 0;
  transform: translateY(24px);
  transition: 1s;
}

ひとまず真似てつくってみて、動かしながら微調整がよいと思います。

動いてるのをみて試すのが、最初はわかりやすいです。

CSSのアニメーションは特に、そう感じます。

★JavaScriptのコードと説明

jQuery を使わず、JavaScript だけで記載。

間違ってはいないはず!

 

実際に私が動かしているコードより必要な部分だけ抜粋したコードに、解説の意味でコメントを付加します。

// フェードインの処理をまとめた関数
function fadeinEvent() {
    // getElementsByClassName で、fadein のクラスを持つ要素を取得し配列として保持
    var fadeinClass= Array.prototype.slice.call(document.getElementsByClassName("fadein"));

    // 配列の数だけ処理を行う
    fadeinClass.forEach(function( element ) {

        // getBoundingClientRect で要素の位置や幅や高さなどを取得
        var boundingClientRect = element.getBoundingClientRect();

        // スクロールの位置情報(html のスクロールがなければ、body のスクロール)を取得
        var scroll = document.documentElement.scrollTop || document.body.scrollTop;

        // ブラウザウィンドウの ビューポートの高さ
        var windowHeight = window.innerHeight;

        // スクロールの位置が、フェードインしたい要素の位置にいるかどうか判定する
        if (scroll > scroll + boundingClientRect.top - windowHeight + 200){

            // 要素を表示する場合は、要素の透明度を無くし、Y方向の移動距離を無くす。これで表示される
            element.style.opacity = "1";
            element.style.transform = "translateY(0)";
        }
    });
}

// 画面がロードされたときに行う処理を記載
window.onload = function(){
    // 画面が中途半端なスクロール位置でリロードされても表示するべきものが表示されるようにするため、ロードですぐに呼び出す
    fadeinEvent();

    // スクロールしたら動くエベントとして用意しておく。スクロールするたびに動くようにする
    window.addEventListener('scroll', fadeinEvent, false);
}

★まとめ

JavaScript が慣れていないとちょっと難しい気がするかもしれませんが、一個ずつ理解すれば特に難しいことはしていません。

詳しく見たい場合は、Chrome のF12で JavaScript をデバッグしながらどういう値が取れているか見るとよいでしょう。

理解できれば、下からと左右からそれぞれの要素がフェードインしたり、移動する時間を要素毎に変えて表示することができるようになります。

私のHOMEではそのようにしています。

理解さえしてしまえば、色々できるので試してみましょう。

 

Let’s try !

 

 

 

 


読んで頂き、ありがとうございます。
この記事が誰かにとって、一つの参考となれば幸いです。

新たな知識や技術を習得し続けていきたいです。

 

 

 

 

コメント

  1. 小水流英昭 より:

    コード確かめました。
    貴殿のコードが一番、動きがいいです。
    さて、一文字ずつにゅるっとfadeinさせようと、 span:nth-of-typeでtransition-delayを使いましたが、効かないですね?

    • KDYKDY より:

      ありがとうございます。
      span:nth-of-type を用いて一文字ずつ feadin する場合は、それぞれの文字を何らかのタグで囲わないと、願う動作にはならないと思います。
      ただの文字列では、nth-of-type でそれぞれの文字を要素として認識できていません。

      < span class= "xxx" >
      < span>あ< /span>< span>い< span>う< /span>
      < /span>

      ↑HTML変換されないように加工してます

      span.xxx:nth-of-type