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. no-image

    JavaScript

    マテリアルデザインによるjQueryタイムピッカー実装「MDTimePicker」

    MDTimePickerはマテリアルデザインをコンセプトにしたタイムピ…

  2. jquery.enhsplitter

    JavaScript

    コンテンツを分離できるフレーム実装「jquery.enhsplitter」

    jquery.enhsplitterはコンテンツを分離させるフレームを…

  3. Tosrus

    JavaScript

    スマホやタブレットにも対応するLightbox風のjQueryプラグイン「Tosrus」

    TosrusというjQueryプラグインを使えば、スワイプやスクロール…

  4. JavaScript

    マルチレベルで操作性に優れたレスポンシブ対応のjQueryナビゲーション

    レスポンシブに対応したマルチレベルの便利なjQueryナビゲーションが…

  5. no-image

    JavaScript

    スライダータイプの質問フォーム実装「jquery.formslider」

    jquery.formsliderはスライダータイプによる質問フォーム…

  6. no-image

    JavaScript

    シンプルでエレガントなモーダルボックスを実装できる「Fallr.js」

    Fallr.jsはシンプルでエレガントなモーダルボックスを実装できるj…

最近の記事

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

アーカイブ

PAGE TOP