【jQuery無し！】JavaScriptを使って、スクロールでフェードインするエフェクトを作成してみた

こんにちは朱夏です。

今回は、JavaScriptの学習の一環として、スクロールでフェードインするエフェクトを作成してみました。
今回、JavaScriptの学習をするため、jQueryは使用していません。
何故なら、学習時点でこんなことに困っていたからです。

朱夏

JavaScriptの勉強をしようと調べてるけど、ググって出てくる情報にはjQueryの情報が混じってて、JavaScriptとjQueryのコードの区別がつかない。

ただ実装するだけならjQueryで良いのですが、JavaScriptの学習そのものをしている時にjQueryのコードが混じっていると、混乱しかありません。
というわけで、JavaScriptで作成したコードの紹介と、jQueryとの違いも調べてきました。

それではやっていきましょう。

[もくじ]
作成したコード
jQueryのコード
あとがき

作成したコード

それでは、作成したコードを紹介します。
HTMLはスクロールさせる必要があったため、以前作成したパララックステンプレートに追加して検証しました。

         <!-- フェードエフェクト練習 -->
         <div class="container">
            <div id="efect" class="row pt-5">
               <div class="col-md-4 col-12 p-2">
                  <img class="img-fluid fadein" src="img/AMEMAN17826009_TP_V.jpg" alt="">
               </div>
               <div class="col-md-4 col-12 p-2">
                  <img class="img-fluid fadein" src="img/AMEMAN17826009_TP_V.jpg" alt="">
               </div>
               <div class="col-md-4 col-12 p-2">
                  <img class="img-fluid fadein" src="img/AMEMAN17826009_TP_V.jpg" alt="">
               </div>
            </div>
         </div>
         <!-- フェードエフェクト練習ここまで -->

CSSです。
シンプルにフェードインと下から上へスライドする様に設定しました。

/* フェードエフェクト練習 */
.fadein {
    /* 透明度:0; */
    opacity: 0;
    /* 変形:移動(座標x, 座標y); */
    transform: translate(0, 45px);
    /* 動作速度:対象 動作時間; */
    transition: all 300ms;
}

今回のポイントとなるJavaScriptです。

function animation() {
    // ID取得
    var myclass = document.getElementById('efect');
    // 要素の寸法と位置を取得
    var topheight = myclass.getBoundingClientRect();
    // 現在のスクロール位置取得
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;        
    // Top位置取得
    var target = topheight.bottom + scrollTop;
    // ウィンドウの高さを取得
    var windowHeight = window.innerHeight;
    // pxを削除して数値化
    var windowHeight = parseFloat(windowHeight);
    // スクロール位置からウィンドウの高さ分を減算
    var point = target - windowHeight;

    // // 動作確認テスト用
    // console.log(myclass + "です");
    // console.log(topheight + "です");
    // console.log(scrollTop + "です");
    // console.log(target + "です");
    // console.log(windowHeight + "です");
    // console.log(point + "です");

    
    // フェードインアニメーション
    // 条件
    if (scrollTop > target - windowHeight) {
        // 透過変更
        myclass.style.opacity = "1";
        // 座標変更
        myclass.style.transform = "translate(0, 0)";
    } else {
        // 透過変更
        myclass.style.opacity = "0";
        // 座標変更
        myclass.style.transform = "translate(0, 45px)";
    }
}

// 初回実行
animation();
// スクロール時の動作
window.addEventListener('scroll', function() {
    animation();
});

コードはこんな感じになりました。
全体の仕組みをざっくり説明すると、座標の取得＞表示位置か確認(繰り返し)＞フェードイン　といった流れで動いています。
これをスクロールをトリガーにして行っているわけですね。

細かく解説していきます。

function animation()

animationという名前を付けて関数を作りました。
後で動作させるときに、animation()と入力するだけで、ここで作成した処理が実行されます。

var myclass = document.getElementById(‘efect’);

変数myclassにid=”efect”の情報を代入します。
アニメーションさせる対象の位置情報を取得する前段階で対象を特定しています。

var topheight = myclass.getBoundingClientRect();

変数topheightに、先程取得したID情報の寸法と座標を代入します。
この情報でフェードインさせる要素の位置をモニターしていきます。

var scrollTop = window.pageYOffset || document.documentElement.scrollTop;

現在のスクロール位置を取得して、変数scrollTopに代入します。
この情報は、ページの一番上から画面に表示されている一番上までの幅を取得できます。
画面の上にどれだけページがはみ出しているかを取得できるということですね。

var target = topheight.bottom + scrollTop;

要素の現在位置とスクロール位置を足したものを変数targetへ代入しています。
この値はページの上端から要素までの幅を計算したもので、基本的に固定値です。

var windowHeight = window.innerHeight;

ウィンドウの縦幅を取得して、変数windowHeightへ代入しています。

var windowHeight = parseFloat(windowHeight);

取得したウィンドウの縦幅はpxが付いているので、それを削除して数値化しています。
そして再度windowHeightへ代入しました。

var point = target – windowHeight;

スクロール位置からウィンドウの高さ分を引いたものを変数pointに代入しています。
これが、画面の下端の座標になります。

console.log(～);

動作確認用に使っていたコンソール吐き出し用のコードです。
完成後はコメントアウトしています。

if (scrollTop > point){処理内容１}else{処理内容２}

フェードイン開始の座標まで到達したかどうかを判断している部分です。
対象の要素が画面の下端に到達したかを見ています。
到達した場合は処理内容１を、そうでない場合は処理内容２を実行します。
今回の実装方法では、上にスクロールして戻った場合、対象の要素がフェードアウトして、もう一度スクロールで表示されたときにはフェードインするといった動きをする様に作りました。

ここまでがanimation()の処理全体になります。

animation()

上記の処理をページの初回表示のタイミングで実行しています。

window.addEventListener(‘scroll’, function() {animation()});

スクロールするたびにanimation()を実行する命令文です。
ここで繰り返しを使用するために関数として処理を作成していたわけです。

jQueryのコード

先ずはjQueryのコードを見てもらいましょう。

$(function(){
    function animation(){
      $('.fadein').each(function(){
        //ターゲットの位置を取得
        var target = $(this).offset().top;
        //スクロール量を取得
        var scroll = $(window).scrollTop();
        //ウィンドウの高さを取得
        var windowHeight = $(window).height();
        //ターゲットまでスクロールするとフェードインする
        if (scroll > target - windowHeight){
          $(this).css('opacity','1');
          $(this).css('transform','translateY(0)');
        }
      });
    }
    animation();
    $(window).scroll(function (){
      animation();
    });
  });

JavaScriptに比べて少ないコードでスッキリしていますね。
あと、JavaScriptで書いている時には無かった$マークが頻繁に出てきます。
これがjQueryの特徴の様です。

javascriptやjQueryを学習している人なら解ると思うのですが、JavaScriptは対象要素をIDで取得しているのに対し、jQueryはclassで取得しています。
これは私のスキル不足によるもので、classだと対象の座標を取得するのに追加で処理が必要になってしまい、その処理をうまく書けなかったためです。

jQueryの場合はCSSと同じ様な感覚((‘.fadein’)の様な書き方)で対象を指定できるので、追加の処理などは特に考慮しなくても良い様です。

さて、ここまで来ると、jQueryを学習していっても良いと思うかもしれませんが、私はあまりお勧めしません。
特に初心者はJavaScriptから学習した方がいいと思います。
理由は以下。

コードが省略され過ぎていて、初心者では解読しづらい
JavaScriptの記述と区別がつきにくい
脱jQueryの流れがある

こんな感じです。
初心者にとっては、jQueryはかなり解読しづらいと思います。
コード自体はそこまで複雑ではないので、少し学習すればどこを書き換えればいいかなどは解ると思います。
しかし、省略の仕方がすごいのでぱっと見何の処理をしているのか解らないのです。
例えば「$(‘.fadein’).each(function()」の部分、”.each”の部分、JavaScriptならfor文が数行になります。

次に区別がつきにくいという話ですが、jQueryを使ったコードの中でも、JavaScriptで書かれた部分もあるわけで、「どこからどこまでがjQueryのコードなの？」というのが解らないのです。
今回の例で言うと、jQueryでかかれたものも、条件分岐の部分は、中の処理を除けばJavaScriptで書かれたときと同じです。

これらが解らないままjQueryから学習を始めると、後々困るのではないかと思います。

最後に、脱jQueryの話です。
もうjQueryはもう必要ない、役目を終えたという流れがあるみたいです。
個人的な見解としては、まだまだ使用されることがある言語だと思いますが、徐々に使わない人が増えていくのではないかとも思います。

使用され続ける理由は、色々言いましたが、結局のところコードの短縮化という意味では優秀だからです。
ちゃんと学習して身に付ければ、jQueryでコードを書いた方が作業速度は上がるでしょう。

それに脱jQueryの流れがあっても、まだ5年か10年は残るんじゃないかと思っています。
技術の乗り換えは時間がかかりますからね。

最後に比較をまとめておきましょう。

JavaScript