Change Background Colors On Scroll Using jQuery and CSS3

A dead simple jQuery solution to detect the scroll position and transition the background colors of block elements as you move the webpage down or up.

See also:

• jQuery Plugin To Dynamically Change Background Colors - bgcFade
• Background Color Transitions with jQuery and CSS3 - Spectrum
• jQuery Plugin To Change Background Colors On Scroll - Color Scroll

How to use it:

1. Specify the background colors using Html5 data-color attribute as displayed below.

<section id="one" data-color="#16A085">
  <h2>Section One</h2>
</section>

<section id="two" data-color="#C0392B">
  <h2>Section One</h2>
</section>

<section id="three" data-color="#8E44AD">
  <h2>Section Three</h2>
</section>

2. Make the content sections full height.

section {
  display: block;
  width: 100%;
  height: 100vh;
}

3. Add a smooth transition effect as the background color changes.

body {
  background: #16A085;
  color: #fff;
  margin: 0;
  transition: all 500ms;
  will-change: background;
}

4. Include the necessary jQuery library before the closing body tag.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>

5. Lister for the scroll & touch move events and change the background colors of your content sections on scroll.

$(window).on("scroll touchmove", function() {

  if ($(document).scrollTop() >= $("#one").position().top) {
    $('body').css('background', $("#one").attr("data-color"));
  };

  if ($(document).scrollTop() > $("#two").position().top) {
    $('body').css('background', $("#two").attr("data-color"))
  };

  if ($(document).scrollTop() > $("#three").position().top) {
    $('body').css('background', $("#three").attr("data-color"))
  };
  
});

 

---

This awesome jQuery plugin is developed by jackharner. For more Advanced Usages, please check the demo page or visit the official website.