index.js

(() => {
  const section = document.getElementById('gradation');
  const createElement = `<button class="to-overview" id="to-overview"></button>`;
  section.insertAdjacentHTML('beforeend', createElement);

  // スクロールする関数
  const scrollToElement = (id) => {
    const element = document.getElementById(id);
    if (element) {
      element.scrollIntoView({ behavior: 'smooth' });
    }
  };

  // クリックイベントの追加
  document.getElementById('to-overview').addEventListener('click', () => {
    scrollToElement('overview'); // 遷移先IDを指定
  });
})();

オーディション概要を見る

ヘッダー、フッターのjs

(() => {
  // PCのみ設定（スマホで適用すると下の要素のかくつきの原因になる）
  function setKvPadding() {
    const kv = document.getElementById('kv');
    if (!kv) return;

    const vw = window.innerWidth;
    const vh = window.innerHeight;

    // スマホ幅（1033px未満）の場合はpaddingTopをリセット
    if (vw < 1033) {
      kv.style.paddingTop = '';
      return;
    }

    // PC向けpaddingTop計算
    const aspectRatio = (1220 - 250) / 1440;
    const basePaddingTop = vw * aspectRatio;
    const extra = basePaddingTop - vh;
    const paddingTop = Math.max(basePaddingTop, basePaddingTop + extra);

    kv.style.paddingTop = `${Math.floor(paddingTop)}px`;
  }

  setKvPadding();
  window.addEventListener('resize', setKvPadding);

  const kv = {
    elm: [],
    init: function () {
      this.elm = Array.from(document.querySelectorAll('.kv__item'));

      const handler = () => {
        const scrollTop = window.scrollY;
        const kvContainer = document.getElementById('kv');
        const kvHeight = kvContainer ? kvContainer.clientHeight : window.innerHeight;

        this.elm.forEach((el) => {
          const parallaxNum = parseFloat(el.getAttribute('data-parallax')) || 0;
          const num = Math.floor(scrollTop * parallaxNum);
          el.style.backgroundPosition = `0 -${num}px`;

          // .kv__item--e のみ opacity を調整
          if (el.classList.contains('kv__item--e')) {
            let opacity = 1 - scrollTop / kvHeight;
            el.style.opacity = Math.max(0, Math.min(1, opacity));
          }
        });
      };

      window.addEventListener('load', handler);
      window.addEventListener('resize', handler);
      window.addEventListener('scroll', handler);
    },
  };

  kv.init();
})();

(() => {
  const header = document.querySelector('#custom_header2');
  document.addEventListener('scroll', () => {
    const scrollY = window.scrollY;
    header.style.transform = `translateY(${-scrollY}px)`;
  });
})();

Enter the title for Text

Enter the title for Text

Enter the title for Text

Enter the title for Text

Enter the title for Text

Enter the title for Text

Enter the title for Text

Enter the title for Text