【JavaScript】スクロールに応じて文字の色を変える方法

今回は、スクールして到達した位置によって文字の色を変化させる方法を紹介します。

まずはデモをご覧ください。

DEMO

ウィンドウに固定された文字が黒の時、背景が黒になると見えなくなってしまいます。

それを防ぐために、背景が黒いセクションに到達したら文字の色を白に変化させます。

それでは実装方法を紹介していきます。

HTML

<header class="header">
  <h1 class="title">ここの色が変わります</h1>
</header>
<div class="wrapper">
<section class="section section--white" id="js-section-1">
  <h1>SECTION1</h1>
  <p>スクロールしてみよう</p>
</section>
<section class="section section--black" id="js-section-2">
  <h1>SECTION2</h1>
  <p>スクロールしてみよう</p>
</section>
<section class="section section--white" id="js-section-3">
  <h1>SECTION3</h1>
  <p>スクロールしてみよう</p>
</section>
<section class="section section--black" id="js-section-4">
  <h1>SECTION4</h1>
  <p>スクロールしてみよう</p>
</section>

CSS

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 10px 20px;
}
.title {
  margin: 0;
}
.bg-is-black .title {
  color: #fff;
}

今回関係ない部分のCSSは省いています。

bodyに.bg-is-whiteというクラスが付いていれば、文字を白色にする記述です。

JavaScript

function changeColor() {
  var timing = 40; //　変化するタイミングを微調整する

  var scrollY = window.pageYOffset;
  var body = document.body;

  var trigger1 = document.getElementById('js-section-1');
  var trigger2 = document.getElementById('js-section-2');
  var trigger3 = document.getElementById('js-section-3');
  var trigger4 = document.getElementById('js-section-4');

  var trigger1Y = trigger1.getBoundingClientRect().top; // ウィンドウ上からの要素の位置
  var trigger2Y = trigger2.getBoundingClientRect().top;
  var trigger3Y = trigger3.getBoundingClientRect().top;
  var trigger4Y = trigger4.getBoundingClientRect().top;

  // 白背景の時はbodyの.bg-is-blackを削除
  // 黒背景の時はbodyに.bt-is-blackを付与
  if(trigger2Y - timing > 0 && 0 >= trigger1Y - timing) {
    body.classList.remove('bg-is-black');
  } else if(trigger4Y - timing > 0 && 0 >= trigger3Y - timing) {
    body.classList.remove('bg-is-black');
  } else {
    body.classList.add('bg-is-black');
  }
}

window.addEventListener('scroll', changeColor);

DEMO

デモを見ていただくと分かる通り、SECTION1つまり、SECTION1の始まりからSECTION2の始まりまでの範囲が白背景となります。

if(trigger2Y - timing > 0 && 0 >= trigger1Y - timing)

これはつまり、「タイトルの位置がSECTION1の始まりからSECTION2の始まりまでの範囲内かどうか」という分岐になります。

もしtrueなら、背景は白なので、bg-is-blackというクラスを削除します。

もしfalseなら、背景は黒なので、bg-is-blackというクラスを付与します。

else if(trigger4Y - timing > 0 && 0 >= trigger3Y - timing)

この記述も、やっていることは同じです。

そこまで難しい処理ではないので、試してみて下さい。

他にもこんな記事があります。

jQueryを使わずにJavaScriptだけでDOM操作

JavaScriptでクリックされた場所の位置座標を取得してみよう

JavaScriptでモーダル（ポップアップ）を表示させる方法