Created

Name

List view

<footer class="footer">
<p><small>&copy; BLRD PTE. LTD.</small></p>
</footer>
<div id="js-stalker"></div>

<script>
(() => {
  const $introductionSelecter = document.querySelector('#section-block-5fc3604dc817436189a43ce7ddf1bcda');
  const mouseStalker = () => {
    const stalker = document.getElementById("js-stalker");
    //aタグにホバー中かどうかの判別フラグ
    let hovFlag = false;

    //上記のdivタグをマウスに追従させる処理
    document.addEventListener("mousemove", function (e) {
      stalker.style.transform =
        "translate3d(" + e.clientX + "px, " + e.clientY + "px, 0)";
    });

    const linkElem = document.querySelectorAll("a:not(.no_stick_)");
      for (let i = 0; i < linkElem.length; i++) {
        //マウスホバー時
        linkElem[i].addEventListener("mouseover", function (e) {
          hovFlag = true;

          //マウスストーカーにクラスをつける
          stalker.classList.add("is-hover");

          //マウスストーカーの位置をリンクの中心に固定
          let rect = e.target.getBoundingClientRect();
          let posX = rect.left + rect.width / 2;
          let posY = rect.top + rect.height / 2;

          stalker.style.transform = "translate(" + posX + "px, " + posY + "px)";
        });
        //マウスホバー解除時
        linkElem[i].addEventListener("mouseout", function (e) {
          hovFlag = false;
          stalker.classList.remove("is-hover");
        });
      }
  };

  const fadeInIntroduction = () => {
    const IS_SHOW = "is-show-introduction";
    if (window.pageYOffset > 0) {
      $introductionSelecter.classList.add(IS_SHOW);
    } else {
      $introductionSelecter.classList.remove(IS_SHOW);
    }
  }

  // アスペクト比を見て、
  const aspectViewChange = () => {
    const IS_ANIMATION = "is-animation";
    if ( 768 <= window.innerWidth) {
      if ( 1.2 < window.innerWidth / window.innerHeight) {
        $introductionSelecter.classList.add(IS_ANIMATION);
        fadeInIntroduction();
      } else {
        $introductionSelecter.classList.remove(IS_ANIMATION);
      }
    } else {
      if ( 0.58 < window.innerWidth / window.innerHeight) {
        $introductionSelecter.classList.add(IS_ANIMATION);
        fadeInIntroduction();
      } else {
        $introductionSelecter.classList.remove(IS_ANIMATION);
      }
    }
  };


  
  const fadeInItem = () => {
    const $fadeInItem = document.querySelectorAll(".separatedSection__contentsWrapper");
    const IS_SHOW = "is-show";
    let fadeInIndex = 0;
    while (fadeInIndex < $fadeInItem.length) {
      const scrollArea = window.innerHeight * 0.8;
      const itemTop =
        $fadeInItem[fadeInIndex].getBoundingClientRect().top +
        window.pageYOffset -
        scrollArea;

      if (window.pageYOffset > itemTop) {
        $fadeInItem[fadeInIndex].classList.add(IS_SHOW);
      }
      fadeInIndex++;
    }
  };
  const $scrollLogo = document.querySelector(".header__logo");
  const scrollLogoSwitch = () => {
    const IS_SHOW_LOGO = "is-show-logo";
    if (window.pageYOffset > window.innerHeight * 0.05) {
      $scrollLogo.classList.add(IS_SHOW_LOGO);
    } else {
      $scrollLogo.classList.remove(IS_SHOW_LOGO);
    }
  };
  
  const init = () => {
    mouseStalker();
    fadeInItem();
    scrollLogoSwitch();
    aspectViewChange();
  }
  init();

    // -------------------------------- //
  // リサイズ・スクロールごとの処理
  // -------------------------------- //
  window.addEventListener("load", () => {
    // ---------------- resizeRunning ---------------- //
    let resizeRunning = false;
    window.addEventListener("resize", () => {
      // 呼び出されるまで何もしない
      if (!resizeRunning) {
        resizeRunning = true;
        // 描画する前のタイミングで呼び出してもらう
        window.requestAnimationFrame(() => {
          // ここでなにか処理をする
          aspectViewChange();
          resizeRunning = false;
        });
      }
    });

    // ---------------- scrollRunning ---------------- //
    let scrollRunning = false;
    window.addEventListener("scroll", () => {
      // 呼び出されるまで何もしない
      if (!scrollRunning) {
        scrollRunning = true;
        // 描画する前のタイミングで呼び出してもらう
        window.requestAnimationFrame(() => {
          // ここでなにか処理をする
          fadeInItem();
          scrollLogoSwitch();
          aspectViewChange();
          scrollRunning = false;
        });
      }
    });
  });
  
})();
</script>

<footer class="footer">
<p><small>&copy; BLRD PTE. LTD.</small></p>
</footer>
<div id="js-stalker"></div>

<script>
(() => {
  const $introductionSelecter = document.querySelector('#section-block-2076d0af0a6f45fe9ad67dd9ebf4082f');
  const mouseStalker = () => {
    const stalker = document.getElementById("js-stalker");
    //aタグにホバー中かどうかの判別フラグ
    let hovFlag = false;

    //上記のdivタグをマウスに追従させる処理
    document.addEventListener("mousemove", function (e) {
      stalker.style.transform =
        "translate3d(" + e.clientX + "px, " + e.clientY + "px, 0)";
    });

    const linkElem = document.querySelectorAll("a:not(.no_stick_)");
      for (let i = 0; i < linkElem.length; i++) {
        //マウスホバー時
        linkElem[i].addEventListener("mouseover", function (e) {
          hovFlag = true;

          //マウスストーカーにクラスをつける
          stalker.classList.add("is-hover");

          //マウスストーカーの位置をリンクの中心に固定
          let rect = e.target.getBoundingClientRect();
          let posX = rect.left + rect.width / 2;
          let posY = rect.top + rect.height / 2;

          stalker.style.transform = "translate(" + posX + "px, " + posY + "px)";
        });
        //マウスホバー解除時
        linkElem[i].addEventListener("mouseout", function (e) {
          hovFlag = false;
          stalker.classList.remove("is-hover");
        });
      }
  };

  const fadeInIntroduction = () => {
    const IS_SHOW = "is-show-introduction";
    if (window.pageYOffset > 0) {
      $introductionSelecter.classList.add(IS_SHOW);
    } else {
      $introductionSelecter.classList.remove(IS_SHOW);
    }
  }

  // アスペクト比を見て、
  const aspectViewChange = () => {
    const IS_ANIMATION = "is-animation";
    if ( 768 <= window.innerWidth) {
      if ( 1.2 < window.innerWidth / window.innerHeight) {
        $introductionSelecter.classList.add(IS_ANIMATION);
        fadeInIntroduction();
      } else {
        $introductionSelecter.classList.remove(IS_ANIMATION);
      }
    } else {
      if ( 0.58 < window.innerWidth / window.innerHeight) {
        $introductionSelecter.classList.add(IS_ANIMATION);
        fadeInIntroduction();
      } else {
        $introductionSelecter.classList.remove(IS_ANIMATION);
      }
    }
  };


  
  const fadeInItem = () => {
    const $fadeInItem = document.querySelectorAll(".separatedSection__contentsWrapper");
    const IS_SHOW = "is-show";
    let fadeInIndex = 0;
    while (fadeInIndex < $fadeInItem.length) {
      const scrollArea = window.innerHeight * 0.8;
      const itemTop =
        $fadeInItem[fadeInIndex].getBoundingClientRect().top +
        window.pageYOffset -
        scrollArea;

      if (window.pageYOffset > itemTop) {
        $fadeInItem[fadeInIndex].classList.add(IS_SHOW);
      }
      fadeInIndex++;
    }
  };
  const $scrollLogo = document.querySelector(".header__logo");
  const scrollLogoSwitch = () => {
    const IS_SHOW_LOGO = "is-show-logo";
    if (window.pageYOffset > window.innerHeight * 0.05) {
      $scrollLogo.classList.add(IS_SHOW_LOGO);
    } else {
      $scrollLogo.classList.remove(IS_SHOW_LOGO);
    }
  };
  
  const init = () => {
    mouseStalker();
    fadeInItem();
    scrollLogoSwitch();
    aspectViewChange();
  }
  init();

    // -------------------------------- //
  // リサイズ・スクロールごとの処理
  // -------------------------------- //
  window.addEventListener("load", () => {
    // ---------------- resizeRunning ---------------- //
    let resizeRunning = false;
    window.addEventListener("resize", () => {
      // 呼び出されるまで何もしない
      if (!resizeRunning) {
        resizeRunning = true;
        // 描画する前のタイミングで呼び出してもらう
        window.requestAnimationFrame(() => {
          // ここでなにか処理をする
          aspectViewChange();
          resizeRunning = false;
        });
      }
    });

    // ---------------- scrollRunning ---------------- //
    let scrollRunning = false;
    window.addEventListener("scroll", () => {
      // 呼び出されるまで何もしない
      if (!scrollRunning) {
        scrollRunning = true;
        // 描画する前のタイミングで呼び出してもらう
        window.requestAnimationFrame(() => {
          // ここでなにか処理をする
          fadeInItem();
          scrollLogoSwitch();
          aspectViewChange();
          scrollRunning = false;
        });
      }
    });
  });
  
})();
</script>

Page 2