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. SweetAlert2

    JavaScript

    カスタマイズ性が高くアクセシビリティ(WAI ARIA)に優れたアラート実装「SweetAlert2…

    SweetAlert2は、レスポンシブ対応でカスタマイズ性が高くアクセ…

  2. Animate Plus

    JavaScript

    CSS、SVGを使った多彩なアニメーションを実装できる「Animate Plus」

    Animate PlusはCSS、SVGを使った多彩なアニメーションを…

  3. JavaScript

    シンプルで使いやすいベーシックなスライドショーを実装できるjQueryプラグイン「Basic jQu…

    jQueryスライダーのネタが多いですが、今日もまたスライダーのプラグ…

  4. Captall

    JavaScript

    画像やDOM要素の上にキャプションを表示することができるjQueryプラグイン「Captall」

    CaptallというjQueryプラグインを使えば、画像や設定したDO…

  5. LC Micro Slider
  6. FitText

    JavaScript

    テキストサイズをブラウザ幅の大きさに自動で合わせてくれるjQueryプラグイン「FitText」

    可変するブラウザ幅にテキストサイズを自動で合わせてくれるjQueryプ…

最近の記事

  1. エチオピア
  2. 紗々 飴色和栗
  3. DCG-CA21
  4. Apple WatchでのMacロック解除を無効
  5. オータムスイートポテトフラペチーノ

アーカイブ

PAGE TOP