CSSやJavaScriptでスクロールに応じて色を変える方法

CSSとJavaScriptを使用して、スクロールに合わせて要素の色を変化させる方法をまとめました。

CSSを使用した基本的なスクロール時の色変更

スクロールに応じて要素の色を変えるために、最もシンプルな方法はCSSの@keyframesを利用する方法です。以下はCSSの参考例です。

/* CSS */
@keyframes colorChange {
  from {
    background-color: #FFFFFF;
  }
  to {
    background-color: #FF0000;
  }
}

/* 色を変えたい要素に適用 */
.element {
  animation: colorChange 2s infinite alternate;
}

この方法では、要素が往復するように色が変わります。上記のコードでは背景色が白から赤に変化します。

アニメーションのカスタマイズ

要素の色変更のアニメーションをカスタマイズしたい場合は、@keyframes内の中間のステップを追加することで実現できます。以下のようにすることで色の変化を滑らかにすることができます。

/* CSS */
@keyframes colorChange {
  0% {
    background-color: #FFFFFF;
  }
  50% {
    background-color: #FF0000;
  }
  100% {
    background-color: #00FF00;
  }
}

JavaScriptを使用したスクロールに応じた色変更

JavaScriptを使用することで、より高度なスクロールに応じた色変更を実装できます。以下は実装例です。

<!-- HTML -->
<div class="element"></div>

/* CSS */
.element {
  height: 2000px;
  background-color: #FFFFFF;
}

// JavaScript
const element = document.querySelector('.element');

window.addEventListener('scroll', () => {
  const scrolled = window.scrollY;
  const height = element.offsetHeight;
  const color = `rgb(${scrolled % 255}, ${height % 255}, ${(scrolled + height) % 255})`;
  element.style.backgroundColor = color;
});

この例では、スクロールするにつれて要素の背景色が変化します。

カラーパレットの適用

より美しく調和の取れた色の変化を実現するために、事前に用意したカラーパレットを活用する方法もあります。カラーパレットを配列として定義し、スクロール位置に応じて色を選択するようにJavaScriptを調整します。

Intersection Observerを使って色を切り替える

Intersection Observerを利用すれば、要素が画面内に表示された際に色を変化させることができます。以下は実装例です。

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // 要素が画面内に表示されたときの処理
    }
  });
});

// 監視対象の要素を指定
const targetElement = document.querySelector('.target');
observer.observe(targetElement);

jQueryを利用してスクロール位置に応じて色を変更する

$(window).scroll(function() {
  const scrollPercentage = ($(window).scrollTop() / ($(document).height() - $(window).height())) * 100;
  if (scrollPercentage > 75) {
    $('body').css('background-color', 'purple');
  } else {
    $('body').css('background-color', 'white');
  }
});

まとめ

CSSとJavaScriptを使用して、スクロールに合わせて要素の色を変化させる方法をまとめました。CSSの@keyframesを利用する方法、JavaScriptを使用する方法、Intersection Observerを使用する方法、jQueryを使用する方法の4つがあるので、ぜひ参考にしてみてください。

▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ