スクロールの値によって文字や背景の色を変えてみる

今回は、JavaScriptを使ってスクロール量によって背景と文字の色を変えていきたいと思います。

具体的にどんなものかというと….

⇒東京アニメセンター

このページみたいな感じです!

というか、このページをたまたま見て再現したくなったので、同じように作っていきたいと思います!

まずは調べてみる

まずは、スクロール量の取得方法を調べてみたところこんな記事を発見しました。

⇒JavaScript で要素のスクロール値を取得して背景色に反映させてみよう

これはもう、ほぼ解決してしまいましたが、せっかくなので東京アニメセンターのページっぽく、複数の要素に対して実行してみたいと思います。

作ってみた

サンプルコードはこちらです

1.HTML

2.CSS

以上がコードになります。

実際に実装したページはこちらになります。

⇒サンプルページ

 

解説

参考にした記事と似た内容になりますが、解説したいと思います。

ここでまず、変数 rate にページを開いた状態を0.0として、ウィンドウの高さ分スクロールした場合を1.0となるように値を入れます。

 

続いて、色を決めます。今回色はHLS色空間を使用します。これは、

  • H(Hue):色相
  • S(Saturation):彩度
  • L(Lightness):輝度

を3つのパラメータとして色を表現する方法です。

今回は白黒ということで、再度を0にし、輝度を0~100(最大値)まで変化させることで白黒の変換をします。

背景と文字で白黒逆の変化をするため、計算式も反比例するようになっています。

 

最後に色を変更します。

 

以上で解説になります。本当は、1.0より上の値になる場合はif文で弾いたりするといいのですが、今回は特に影響がないので無視しますが、実際に使用する際は実装してみてください!

 

今回のブログ曲

今回の投稿中に聴いていた曲はこちら

実はPerfumeファンなんです!


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です