JavaScriptで左から順番にフェードインさせる方法

画像やリスト、カードの表示などで使えるかなと思います。
調べると似たような記事もありますが、
こちらはメインのフェードインにkeyframesを使用していないため、keyframesを別途付けたい場合におすすめです

今回は真ん中のロージーにkeyframesを当ててみました。

では先にコードをどうぞ！

JS・CSSを順番に解説していきます

JSの解説

document.addEventListener('DOMContentLoaded', function() {
  //クラス名がfadeinの要素をすべて取得して変数に格納
  var fadein = document.querySelectorAll('.fadein');

  function onScroll() {
      var hSize = window.innerHeight; //ページが表示される高さを取得して変数に格納
      var scroll = window.scrollY;　//現在のスクロール位置を取得して変数に格納

      //fadeinに格納されたすべての要素に対して、順番に関数を実行
      //elementが現在の要素、iはそのインデックスです
      fadein.forEach(function(element, i) {
              if (scroll > element.getBoundingClientRect().top - hSize + 50) {
              //一定時間後に要素にactiveクラスを追加します
              setTimeout(function() {
                  element.classList.add('active');
              }, i * 1000);
          }
      });
  }

  window.addEventListener('load', onScroll);
  window.addEventListener('scroll', onScroll);
});

補足

i * 1000の部分は、読み込まれたfadein〇番目×秒数になっています。
なので今回は、1×1000ミリ秒、2×1000ミリ秒、のように順番に.activeがついていくようになっており、
その時差によって左から順番に要素が表れていくようにしています。

animation-delayなどを駆使して順番に出す調整も可能ですが
画面に要素が入ってから実行させる場合は今回のようにJSで制御してしまいましょう！

CSSの解説

.fadeinにtransition-duration: 2s;を設定することで
フェードインの動きやopacity:1への切り替わりにかかる時間を設定しています。

今回のフェードインの動きはopacityとbottomの変化で作成しているため
繰り返しの動きがない＆変化も単純なため、transitionで対応しています。

これにより、keyframesを使用せずに対応できるので、フェードイン以外のアニメーションをロージーに設定することが可能になります！

しかし、もしフェードインに繰り返しの処理をはじめとした複雑な動きが必要な場合は、
transitionではなくkeyframesを使用する必要があります。

transitionとanimationの違いについてやその検証は、下記サイトがとても分かりやすかったです！

TransitionとAnimationはどう使い分ける？使い方から解説【CSSアニメーション】

最後に

いかがでしたでしょうか？

フェードインのアニメーションなどは調べるとJQueryで対応された例がいっぱい出てきますが、
個人的にJavaScriptを強化していきたいな、と思っているので
今回は実務でJQueryで作成したものをJavaScriptに直して書いてみました。

いろんなところで使える動きかなと思うので、ぜひ使ってみてくださいね。

ところで

ロジカルスタジオでは、フロントエンドエンジニア・バックエンドエンジニアを募集しております！

下記リンクからお待ちしております！