italia2024/js/_enchants/_link-animeSmooth.js

Italia 2024 assets

(function () {
  //is-whiteOut.js
  let eyedOverLoad = document.getElementById('overload4efA');

  document.addEventListener('DOMContentLoaded', function () {
    eyedOverLoad.classList.remove('is-whiteOut');

    let arrNormalLinks = Array.prototype.slice.call(document.querySelectorAll('a[href]:not([href*="#"]):not([target]):not([onclick])')); //Arr.NodeList

    //ハッシュリンク(#)と別ウィンドウでページを開く場合はスルー
    arrNormalLinks.forEach(function (arrNormalLink) {
      arrNormalLink.addEventListener('click', function (e) {
        e.preventDefault(); //ナビゲートをキャンセル
        let destURL = this.getAttribute('href'); //遷移先のURLを取得
        if (destURL !== '') {
          eyedOverLoad.classList.add('is-whiteOut');  //bodyに class="is-whiteOut"を挿入
          setTimeout(function () {
            window.location = destURL;  //0.3秒後に取得したURLに遷移
          }, 300);
        }
        return false;
      });
    });
  });
})();

(function () {
  //scroll-fadeLink.js
  let arrFadeLinks = Array.prototype.slice.call(document.querySelectorAll("a[href*='#'].fade-link")); //Arr.NodeList

  //aタグにそれぞれクリックイベントを設定
  for (let i = 0; i < arrFadeLinks.length; i++) {
    arrFadeLinks[i].addEventListener('click', (arrFadeLink) => {

      arrFadeLink.preventDefault();

      const eyedFadeLink = arrFadeLinks[i].hash.replace("#", ""); //.hashを使用してアンカーIDを取得
      const tgtFadeLink = document.getElementById(eyedFadeLink); //リンク先の要素を取得

      if (tgtFadeLink) {
        const rectTop = tgtFadeLink.getBoundingClientRect().top; //ブラウザからの高さを取得
        const crntScrlY = window.scrollY; //現在のスクロール量を取得
        const hgtHeader = 92; //固定ヘッダー分の高さ
        const tgtScrlY = rectTop + crntScrlY - hgtHeader; //最終的な位置を割り出す

        //GSAPのインスタンスを作成
        const timeline = gsap.timeline();
        const marbleWhite = document.getElementById('overload4efA');

        timeline
          .to('body', {
            onComplete: function () {
              //スムーススクロール（Anime.js）
              anime({
                targets: "html, body",
                scrollTop: tgtScrlY,
                easing: 'easeOutCubic',
                duration: 700
              });
            }
          })
          .to(marbleWhite, {
            duration: 0,
            opacity: 1,
          })
          .to(marbleWhite, {
            duration: 0.6,
            opacity: 0
          }, '<0.6');

        //タイムラインを再生
        timeline.play();
      } else {
        console.warn(`Element with ID '${eyedFadeLink}' not found.`);
      }
    });
  }
})(); ///function scroll-fadeLink.js

(function () {
  //scroll-smoothLink.js
  let arrSmthLinks = Array.prototype.slice.call(document.querySelectorAll("a[href*='#']:not(.tab-link):not(.fade-link)")); //Arr.NodeList

  //aタグにそれぞれクリックイベントを設定
  for (let i = 0; i < arrSmthLinks.length; i++) {
    arrSmthLinks[i].addEventListener('click', (arrSmthLink) => {

      //現在のURLとクリックされたリンクのURLを比較
      if (location.pathname.replace(/^\//, '') == arrSmthLinks[i].pathname.replace(/^\//, '')
        && location.hostname == arrSmthLinks[i].hostname) {

        arrSmthLink.preventDefault();

        const eyedSmthLink = arrSmthLinks[i].hash.replace("#", ""); //.hashを使用してアンカーIDを取得
        const tgtSmthLink = document.getElementById(eyedSmthLink);

        if (tgtSmthLink) {
          const rectTop = tgtSmthLink.getBoundingClientRect().top; //ブラウザからの高さを取得
          const crntScrlY = window.scrollY; //現在のスクロール量を取得
          const hgtHeader = 92; //固定ヘッダー分の高さ
          const tgtScrlY = rectTop + crntScrlY - hgtHeader; //最終的な位置を割り出す

          //スムーススクロール（Anime.js）
          anime({
            targets: "html, body",
            scrollTop: tgtScrlY,
            easing: 'easeOutCubic',
            duration: 700
          });
        } else {
          console.warn(`Element with ID '${eyedSmthLink}' not found.`);
        }
      }
    });
  }
})();