スクロールの値によって文字や背景の色を変えてみる
今回は、JavaScriptを使ってスクロール量によって背景と文字の色を変えていきたいと思います。
具体的にどんなものかというと….
このページみたいな感じです！
というか、このページをたまたま見て再現したくなったので、同じように作っていきたいと思います！
まずは調べてみる
まずは、スクロール量の取得方法を調べてみたところこんな記事を発見しました。
⇒JavaScript で要素のスクロール値を取得して背景色に反映させてみよう
これはもう、ほぼ解決してしまいましたが、せっかくなので東京アニメセンターのページっぽく、複数の要素に対して実行してみたいと思います。
作ってみた
サンプルコードはこちらです
１．HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport"content="width=device-width,initial-scale=1"> <!-- SEO --> <title>Sample | ScrollColor</title> <!-- CSS --> <link href="style.css"rel="stylesheet"> </head> <body> <div id="text"> <h1>HelloWorld</h1> <p>- こんにちは世界 -</p> </div> <div class="wrap"> <div class='pad'> </div> </div> <!-- JS --> <script> window.onload = function() { document.querySelector('.wrap').onscroll = function() { // スクロール量を 0.0 ~ 1.0 に変換 var rate = (this.scrollTop/window.innerHeight); // hsl 値を作成 var backcolor = 'hsl(0, 0%, ' + (rate*100) + '%)'; var textcolor = 'hsl(0, 0%, ' + (100-rate*100) + '%)'; // 背景色を変更 document.body.style.backgroundColor = backcolor; document.getElementById("text").style.color = textcolor; }; }; </script> </body> </html> |
２．CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
/* 変数宣言 */ :root { --title-size:10vw; --text-size: 3vw; } html { font-size: 62.5%; } body { color: #fff; background-color: hsl(0, 0%, 0%); } #main{ } #text{ position: fixed; top: 0; bottom: 0; width:100%; } h1 { text-align:center; font-size:var(--title-size); line-height:var(--title-size); margin-top:35vh; } p{ text-align:center; font-size:var(--text-size); line-height:var(--text-size); } .wrap { position: absolute; height: auto; top: 0; bottom: 0; width: auto; left: 0; right: 0; overflow: auto; } .pad { height:300vh; } |
以上がコードになります。
実際に実装したページはこちらになります。
解説
参考にした記事と似た内容になりますが、解説したいと思います。
|
1 |
var rate = (this.scrollTop/window.innerHeight); |
ここでまず、変数 rate にページを開いた状態を0.0として、ウィンドウの高さ分スクロールした場合を1.0となるように値を入れます。
|
1 2 |
var backcolor = 'hsl(0, 0%, ' + (rate*100) + '%)'; var textcolor = 'hsl(0, 0%, ' + (100-rate*100) + '%)'; |
続いて、色を決めます。今回色はHLS色空間を使用します。これは、
- H（Hue）：色相
- S（Saturation）：彩度
- L（Lightness）：輝度
を3つのパラメータとして色を表現する方法です。
今回は白黒ということで、再度を0にし、輝度を0～100（最大値）まで変化させることで白黒の変換をします。
背景と文字で白黒逆の変化をするため、計算式も反比例するようになっています。
|
1 2 |
document.body.style.backgroundColor = backcolor; document.getElementById("text").style.color = textcolor; |
最後に色を変更します。
以上で解説になります。本当は、1.0より上の値になる場合はif文で弾いたりするといいのですが、今回は特に影響がないので無視しますが、実際に使用する際は実装してみてください！
今回のブログ曲
今回の投稿中に聴いていた曲はこちら
実はPerfumeファンなんです！
