スクロールに応じて色を変える方法5つ【CSS/JavaScript】

スクロールに合わせて要素の色を変える方法を、4通り解説します。

結論から書くと、いま新しく作るなら animation-timeline: scroll() を使ったCSSだけの実装がいちばん軽くなります。スクロール量に応じたアニメーションを、JavaScriptを1行も書かずに作れます。

▼4つの方法の使い分け

以下、それぞれの実装を解説します。

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だけでスクロールに連動させる

結論：animation-timeline: scroll() を使うと、アニメーションの進行度をスクロール位置そのものに結び付けられます。JavaScriptは不要です。

通常の animation は時間で進みますが、animation-timeline を指定すると「時間」の代わりに「スクロール量」で進むようになります。スクロールを戻せばアニメーションも巻き戻ります。

@keyframes change-color {
  from { background-color: #3498db; }
  to   { background-color: #e74c3c; }
}

.scroll-color {
  animation: change-color linear;
  /* 時間ではなくスクロール量で進める */
  animation-timeline: scroll();
}

scroll() は、いちばん近いスクロールできる祖先（多くの場合はページ全体）を基準にします。ページの先頭で青、最下部で赤になり、その途中は連続的に変化します。

要素が画面に入っている間だけ変化させたい場合は view() を使います。

.fade-in-color {
  animation: change-color linear;
  /* その要素が画面を横切る間で進める */
  animation-timeline: view();
  /* 進行の範囲を指定する */
  animation-range: entry 0% cover 50%;
}

対応していないブラウザへの備え

結論：Chrome・Edge 115以降と Safari 18以降が対応しています。Firefox は2026年9月時点でまだ既定で無効なので、@supports で分岐させてください。

/* 未対応ブラウザ向けの初期状態 */
.scroll-color {
  background-color: #3498db;
}

@supports (animation-timeline: scroll()) {
  .scroll-color {
    animation: change-color linear;
    animation-timeline: scroll();
  }
}

未対応のブラウザでは色が固定されるだけで、レイアウトは崩れません。演出が無くても内容が読める作りにしておけば、そのまま使って問題ありません。

なお、動きを減らす設定にしている人への配慮も入れておきます。

@media (prefers-reduced-motion: reduce) {
  .scroll-color {
    animation: none;
  }
}

scrollイベントとの違い

結論：animation-timeline はブラウザの合成処理だけで動くため、スクロール中に処理が詰まりません。

scroll イベントで色を書き換える方法は、スクロールのたびにJavaScriptが実行されます。他の処理が重いページでは、色の変化がカクついたり遅れたりします。

▼実装方法による違い

「スクロール量に応じて連続的に変える」ならCSS、「特定の条件で処理を分ける」ならJavaScriptという使い分けになります。色を変えるだけならCSSで足ります。

まとめ

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

スクロールに連動する演出は、CSS Scroll Timelineで実現する新しいスクロール体験でも扱っています。色以外の変化を付けたい場合はこちらもどうぞ。

マウス操作に反応させる演出と組み合わせるなら、マウスストーカーの作り方も参考になります。

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