スクロールに合わせてアイコンの色が変わる！背景色連動機能のJavaScriptを実装！

ウェブサイトのデザインには、ユーザーの動きに合わせて色やスタイルを変更することがよくあります。今回は、スクロールに応じて背景の色が変わると同時に、メニューアイコンの色も変わるという、視覚的にインパクトのある機能を実現する方法を紹介します。この機能を使うことで、より洗練されたインタラクティブなデザインを作ることができます。

サンプル
この機能でできること
必要な技術
実装手順
ポイントと注意点
まとめ

サンプル

See the Pen Scroll-Based Styling by kasasagi_kmnmc (@kasasagi_kmnmc) on CodePen.

右上の「☰」の色が背景色に合わせて変更されます。

サンプルを別ウィンドウで見る

この機能でできること

スクロールによる動的なアイコンの色を変更

ページ内のセクションが表示されると、その背景色に合わせてメニューアイコンの色が変わります。これにより、アイコンが背景と重なる部分でも視認性が高く、使いやすくなります。

必要な技術

HTML

ページの構造を作成します。セクションごとに異なる背景色を設定し、アイコンの色変更を制御します。

CSS

基本的なレイアウトやアイコンの色変更に使用します。transitionを使って色がスムーズに切り替わるように設定します。

JavaScript

スクロール位置を監視し、セクションごとに背景色を取得して、アイコンの色を動的に変更します。

実装手順

HTML構造 最初に、ページ内にセクションを作り、アイコンを表示するためのメニューを配置します。

<body>
  <div id="menu" class="menu">
    <i class="icon">☰</i> <!-- メニューアイコン -->
  </div>
  <section class="content" data-bg="white"></section>
  <section class="content" data-bg="black"></section>
  <section class="content" data-bg="green"></section>
</body>

各セクションに「data-bg」属性を設定して、背景色を指定します。

CSSでの基本スタイル設定 アイコンの初期状態とセクションの背景色を設定します。transitionを使って色がスムーズに変化するようにします。

.menu {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 10;
}

.icon {
  font-size: 24px;
  color: black; /* 初期状態は黒 */
  transition: color 0.3s ease; /* 色の変更がスムーズ */
}

.content[data-bg="white"] {
  background-color: white;
}

.content[data-bg="black"] {
  background-color: black;
}

.content[data-bg="green"] {
  background-color: green;
}

JavaScriptでスクロール位置を監視 JavaScriptを使ってスクロール時にセクションの背景色に合わせてアイコンの色を変更します。

const menuIcon = document.querySelector('.icon');
const sections = document.querySelectorAll('.content');

function getIconColor(bgColor) {
  switch (bgColor) {
    case 'white':
      return 'black';
    case 'black':
      return 'white';
    case 'green':
      return 'yellow'; // 緑背景は黄色に設定
    default:
      return 'black';
  }
}

window.addEventListener('scroll', () => {
  sections.forEach(section => {
    const rect = section.getBoundingClientRect();
    if (rect.top <= 50 && rect.bottom >= 50) {
      const bgColor = section.dataset.bg;
      menuIcon.style.color = getIconColor(bgColor);
    }
  });
});