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

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

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

 

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

 

 

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

 

★コードについて解説

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

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

★HTMLのコードと説明

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

<h2 id="concept">CONCEPT</h2>
<div class="fadein-x-left">
 (略)
</div>
<div class="fadein-x-right">
 (略)
</div>

それぞれ、左からフェードインするものと右からフェードインするという風に CSS で設定していきます。

 

★CSSのコードと説明

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

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

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

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

★JavaScriptのコードと説明

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

間違ってはいないはず!

 

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

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

    // 先に取得した二つの配列を一つの配列にする
    Array.prototype.push.apply(fadeinXClass, fadeinXRClass);

    // 配列の数だけ処理を行う
    fadeinXClass.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){

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

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

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

★まとめ

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

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

 

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

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

 

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

 

Let’s try !

 

 

 

 


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

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

 

 

 

コメント