スクロールしてファーストビューを過ぎたらロゴの色を変える方法

Web制作

こんにちは!フォトグラファー&Web制作のじゅんぺい(@junpei_sugiyama)です!

今回は、

スクロールしていってファーストビューを過ぎたらロゴの色を変える方法ない?

 

 

といった方に対する記事となります。

固定したロゴは白でファーストビューは色のついた背景があるから問題ないけど、メインコンテンツの背景は白だから同化してしまう・・・という事があります。

実務でも何度かあったので、今回の記事でご紹介しておきます。

スクロールしてファーストビューを過ぎたらロゴの色を変える

まずは今回の完成形を見てみます(スマホで見る場合はResultをタップして下さい)

See the Pen
NWRGOOB
by junpei (@junpei-sugiyama)
on CodePen.


ロゴは最初白色ですが、スクロールしていってファーストビューを過ぎたら色が変わっています。

それでは簡単に解説していきます。

 

コード説明

まずHTMLを見てみます。

<header class="header js-header">
  ロゴ
</header>
<div class="mv">
  <p>ファーストビュー</p>
</div>
<div class="contents">
  <p>メインコンテンツ</p>
</div>

特に変わった所はありませんが、jQueryを使う箇所については「js-」を付けたclass名を追記しています。

今回で言えば js-header ですね。

class名の header を使っても出来ますが、js-header とする事でここは js を使っているなとすぐ分かります。

次にcssを見てみます。

.header {
  color: #fff;
  transition: color 0.4s ease-out;
} /* スクロールしたらヘッダーメニューのフォントカラー変更 */
.header.headerColorScroll {
  color: #ff6347;
  transition: color 0.4s ease-out;
}

今回の実装で注目する箇所だけ書いています(全体を見たい場合は最初のcodepenでご確認下さい)

まず最初のロゴの色は白(#fff)となり、スクロールしていってファーストビューを過ぎた時の色は#ff6347となっています。

.headerColorScroll だけでも大丈夫ですが、.header を付ける事で .header に .headerColorScroll が付与された時の動作だなと分かります。

また、色の切り替わりが瞬間的に切り替わるのではなく、ふんわり変化させたい場合は transition を使います。

今回は分かりやすくする為に0.4秒にしましたが、もう少し短く0.2秒くらいでもいいかも知れません。

最後に js を見てみます。

// スクロールするとロゴの色変更
$(function () {
  $(window).on("scroll", function () {
    const sliderHeight = $(".mv").height();
    if (sliderHeight - 30 < $(this).scrollTop()) {
      $(".js-header").addClass("headerColorScroll");
    } else {
      $(".js-header").removeClass("headerColorScroll");
    }
  });
});

スクロールしていき、.mv を過ぎたら .js-headerheaderColorScroll というclassを付与し、そうでなければ .js-header から headerColorScroll というclassを外すという内容です。

ここでやっていることは、スクロールしていって指定した領域を過ぎたらclassを付与するという事なので、今回は色の変更ですがcss側でフォントのサイズを変えたり、ロゴが画像の場合は画像を2種類用意して、display: block; と display: none; を使えば画像を切り替える事も可能です。

また4行目の30という数値ですが、色の変化が少し早い、または少し遅い場合にこの数値を変える事で切り替わりのタイミングを調整出来ます。

それでは最後にもう一度完成形を見てみます。

 

See the Pen
NWRGOOB
by junpei (@junpei-sugiyama)
on CodePen.

これは実務でも役に立つと思うので、ぜひ使えるようになっておきましょう。