スクロールに応じて、背景色(background-color)を変える

🗂 Tech

最近は、ブログを書かないのに、ブログをカスタマイズすることにハマっております。

僕は完全に形から入る派です。

そんなことはさておき、スクロールに応じて、背景色(background-color)を変えてみたので紹介しようと思います。

色合いを決める

まずはどんな風な色合いにしたいか決めると良いと思います。今回はRGBで色を決定するので、下のカラーピッカーで動かしてみて、そのRGBの動きをメモります。

今回は、薄くて淡い色合いにしようと思います。なので、数値は割と高めです。

そして、挙動をメモったところこんな感じでした。(少し粗いですが

An image from Notion

RED : 255 → 239 → 255

y = 1/4(x - 8)^2 + 239 (0 <= x <= 16)

An image from Notion

BLUE : 239 → 255 → 239

y = -1/4(x - 8)^2 + 239 (0 <= x <= 16)

An image from Notion

GREEN : 239 → 255 → 239

y = -1/2(x - 8)^2 + 239 (0 <= x <= 4, 8 <= x <= 12)

y = 255 (4 <= x <= 8) y = 239 (12 <= x <= 16)

An image from Notion

数式ができました!!

画面の高さとスクロール量について

JavaScriptで画面の高さやスクロール量を取得するには様々な方法があります。

今回僕は下記のようにしました。

//スクロール量を取得
let scroll = window.scrollY;

// ウィンドウの高さを取得
let windowHeight = window.innerHeight;

// ページの高さを取得(ページによって異なる、いわばbodyの高さ)
let pageHeight = document.body.clientHeight;

注意したいのが、ページの高さ = スクロール量 + ウィンドウの高さ ということです。

他のやり方は以下のリンクが詳しいです

コード

window.addEventListener('scroll', function () {
    //スクロール量を取得
    let scroll = window.scrollY;
    // ウィンドウの高さを取得
    let windowHeight = window.innerHeight;
    // ページの高さを取得(ページによって異なる、いわばbodyの高さ)
    let pageHeight = document.body.clientHeight;
    // 元々のwindowHeightとスクロール量を足すことでページ全体の高さと等しくなる
    // (window.scrollY + window.innerHeight) / document.body.clientHeight
    let x = 16 * (scroll / (pageHeight - windowHeight));
    let a = 1 / 4;
    let aG = 1 / 2;
    let R = a * Math.pow(x - 8, 2) + 239;
    let B = -a * Math.pow((x - 8), 2) + 255;
    let G = 0;
    if (x <= 4) {
      G = -aG * Math.pow((x - 4), 2) + 255;
    } else if (x <= 8) {
      G = 255;
    } else if (x <= 12) {
      G = -aG * Math.pow((x - 4), 2) + 255;
    } else {
      G = 239;
    }
    
    document.body.style.backgroundColor = `rgb(${R},${B}, ${G} )`
  
  })

少し解説

 let x = 16 * (scroll / (pageHeight - windowHeight));

0 <= (scroll / (pageHeight - windowHeight) <= 1 となるので、そこに定義域が0から16までになるように16でかけてあげます。

あとは、数式に当てはめればOKです。

結果

こんな感じになりました!

An image from Notion

なんか原宿の綿飴みたい!食べたことないけど。

比較

試しに比較してみます

An image from Notion
An image from Notion

わりかし、再現できているような気がします。速度合わせてないのは、すみません。

皆さんもやってみてください!

おすすめのオンラインGIFメーカー

書いてる時に、おすすめのオンラインでGIFを作れるサイトを見つけたので最後に紹介します

コメントと共に投げ銭する(OFUSE)

共有したけりゃ、すりゃいいんじゃない