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を活用されてみてはいかがでしょうか?

Slyderレスポンシブ対応のスライダーナビゲーションを実装できる「Slyder」前のページ

さまざまな埋め込み動画をレスポンシブで表示できる「SuperEmbed.js」次のページSuperEmbed.js

関連記事

  1. Lity

    JavaScript

    超軽量でアクセシブル・レスポンシブなLightboxを実装できる「Lity」

    Lityは、超軽量でアクセシブル・レスポンシブなLightboxプラグ…

  2. jBox

    JavaScript

    ツールチップやモーダルウィンドウなどを実装できるjQueryプラグイン「jBox」

    jBoxはカスタマイズ性に優れたツールチップ、モーダルウィンドウ、通知…

  3. no-image
  4. jQuery Floating Social Share
  5. JavaScript

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラグイン「mlens」

    虫メガネのようにマウスを置いた所を拡大することができるjQueryプラ…

  6. Multi-Step-Form-Js

最近の記事

  1. 東京都現代美術館
  2. スーリア バターチキン
  3. そそそ 明太クリームそうめん
  4. すしざんまい
  5. 蒼龍唐玉堂 特製牛バラ担々麺

アーカイブ

PAGE TOP