スムーススクロールとフェードイン・アウトアニメーションを組み合わせたウェブページナビゲーション

ウェブページのナビゲーションを向上させるために、スムーススクロールとフェードイン・アウトアニメーションを組み合わせた効果を実装する方法を紹介します。この記事では、Anime.jsとGSAPという2つの人気のJavaScriptアニメーションライブラリを使用して、この効果を実現する方法を説明します。

コードの解説

まず、以下のコードを見てみましょう。

(function () {
function smoothScroll(event, targetY, fade = false) {
  event.preventDefault();
  const timeline = gsap.timeline();

  timeline.to('html, body', { duration: 1, scrollTop: targetY, ease: 'easeOutCubic' }, 0);
  if (fade) {
    timeline.to('body', { duration: 0.3, opacity: 0 }, 0.1)
      .to('body', { duration: 0.3, opacity: 1 }, 0.6);
  }

  timeline.play();
}

function addSmoothScrollListener(selector, fade = false) {
  let elements = Array.prototype.slice.call(document.querySelectorAll(selector));
  for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener('click', event => {
      const targetElement = document.getElementById(elements[i].getAttribute('href').replace('#', ''));
      if (targetElement) {
        const targetY = targetElement.getBoundingClientRect().top + window.scrollY - 60;
        smoothScroll(event, targetY, fade);
      } else {
        console.warn(`Element with ID '${elements[i].getAttribute('href').replace('#', '')}' not found.`);
      }
    });
  }
}
addSmoothScrollListener('a[href^="#"]:not(.tabs-link):not(.fade-link)');
addSmoothScrollListener('a[href^="#"].fade-link', true);
})();

関数 smoothScroll

この関数は、スムーススクロールとフェードイン・アウトアニメーションを行います。GSAPのタイムラインを使用して、htmlとbody要素をターゲットY位置までスムーススクロールさせます。fadeパラメータがtrueの場合、body要素の透明度を変更してフェードアウトとフェードインのアニメーションを追加します。

関数 addSmoothScrollListener

この関数は、指定されたセレクターを持つすべての要素にクリックイベントリスナーを追加します。要素がクリックされると、smoothScroll関数が呼び出され、適切なスクロールとフェードアニメーションが行われます。

まとめ

このコードスニペットは、ウェブページにスムーススクロールとフェードイン・アウトアニメーションを簡単に追加する方法を示しています。Anime.jsとGSAPは、ウェブページのアニメーションを簡単かつ効果的に実装するための強力なツールです。このコードを使用して、ウェブサイトのユーザーエクスペリエンスを向上させることができます。