Webサイトを作成していると背景にちょっとした工夫を入れたくなることありますよね。
今回はgsapなどを使用せず、スクロールに合わせて背景色を変える方法をいくつか作成してみました！
基本形
まずは基本形です。
スクロールに合わせてbodyに指定されたbackground-colorが計算されて変更されるようにしています。
See the Pen Untitled by あんちょび (@ndcrmelu-the-looper) on CodePen.
特定コンテンツだけ4秒ごとに色が変わるver
次は基本形に少し工夫を。
「js_bgChange」のclassを付与したエリアでは4秒ごとに色が変わります。
See the Pen background color change – random – by あんちょび (@ndcrmelu-the-looper) on CodePen.
特定コンテンツだけ4秒ごとに色が変わる＋色を変えるボタンver
色が変わる仕様にさらに追記をして、色を変えるボタンを作成しました。
あんまり使わなさそうですが、ちょっと遊び心を入れるのもいいですよね。
See the Pen background color change – trigger – by あんちょび (@ndcrmelu-the-looper) on CodePen.
