🌊

フェードアニメクラス(scrollイベント)

2022/11/29に公開

クラスをやり始めた頃に、元々あったJavaScriptをクラス化したものです。
最初の頃のコードをそのまま無修正で投げただけですので、冗長・ムダな部分やダメな部分があるかと思います。

またscrollイベントなので、パフォーマンスはあまり良くないかと思います。

用例
new FadeAnime("hoge")._init();
js-hogeクラスが付いているタグに対してu-hogeクラスを付与します

export function fadeAnime() {
  //スクロールフェードアニメーション
  const offsetAdjustment = 100; //調整量
  const getScrollTop = () => { return document.documentElement.scrollTop || document.body.scrollTop };

  class FadeAnime {
    constructor(fadeType, elemOffset, scroll, windowHeight, fadeHeight) {
      this.fadeType = document.querySelectorAll(`.js-${fadeType}`);
      this.elemOffset = this.fadeType.forEach(elem => elem.offsetTop + offsetAdjustment);
      this.scroll = getScrollTop();
      this.windowHeight = window.innerHeight;
      this.fadeHeight = this.elemOffset - this.windowHeight;
    }

    _init() {
      let cls = [], cl;
      this.fadeType.forEach(elem => {
        elem.classList.forEach(el => {
          el.indexOf("js-fade") == 0 ? cls.push(el) : "";
        });
      });
      cls = Array.from(new Set(cls));
      cls.forEach(elm => cl = elm.split("js-")[1]);
      const addCls = `u-${cl}`;
      const fadeTarget = this.fadeType;

      function scrollAct() {
        this.scroll = getScrollTop();
        fadeTarget.forEach(t => {
          this.fadeHeight = t.offsetTop + offsetAdjustment - window.innerHeight;
          if (this.scroll >= this.fadeHeight) t.classList.add(addCls);
        });
      }
      window.addEventListener("load", scrollAct);
      window.addEventListener("scroll", scrollAct);
      window.addEventListener("resize", scrollAct);
    }
  }
  new FadeAnime("fadeIn")._init();
  new FadeAnime("fadeUp")._init();
  new FadeAnime("fadeRight")._init();
  new FadeAnime("fadeLeft")._init();

Discussion