スクロールで背景カラーを変化させる「Changing Background Color while scrolling」

Changing Background Color while scrolling

Changing Background Color while scrollingは、スクロールすることで背景カラーを徐々に変化させることができます。いろんなカラーを楽しめるので、コンテンツの雰囲気や配置に合わせて変化させるのもおもしろそうですね。

HTML、CSSに背景カラーを設定

Changing Background Color while scrolling

下へスクロールしていくことで、鮮やかなブルーからダーク系のブルーに変化していきます。途中、グリーンやオレンジ、パープルなどの色にも変化します。滑らかに変化していくので、スクロールが楽しくなりますね。

デモでは、HTMLのdiv(クラス名:slide、slide-five)とCSSのbodyに背景カラーを設定しています。ちなみにHTMLはdata属性にbackgroundを指定しています。

先ほど紹介したリンク先には実際のコードも記述されているので、具体的な実装方法を知りたい人は、アクセスしてみてください。

というわけで、スクロールに応じて背景カラーを変化させたい場合は、ぜひChanging Background Color while scrollingを活用されてみてはいかがでしょうか?

スポンサーリンク

スポンサーリンク

アクセスランキング

Tags

オススメ商品

Archives