Changing Background Color while scrolling

JavaScript

スクロールで背景カラーを変化させる「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を活用されてみてはいかがでしょうか?

関連記事

  1. jQueryを使わないコード集

    JavaScript

    jQueryを使わないでコードを書くTips集

    jQueryを使えば簡単にできることがたくさんあるんですが、ちょっとし…

  2. chalk-animation

    JavaScript

    カラフルなアニメーションを実装できる「chalk-animation」

    chalk-animationはカラフルなアニメーションによるテキスト…

  3. stickUp2

    JavaScript

    スクロールしてもついてくるスティッキー実装「stickUp2」

    stickUp2はスクロールしてもついてくるシンプルなスティッキーを実…

  4. Lightense Images
  5. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP