Magic scrolling colours

Scroll inside this box to see the background color change for each panel.

First panel

Second panel

Third panel

Fourth panel

Fifth panel

Sixth panel

Full page version:


  <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Hello!</title>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>    
<style>/* Setting fade transition and default settings */
body {
  color: #000;
  background-color: #ffadad;
  transition: background-color 1s ease;
}

/* panel styles */
.panel {
  /* min height incase content is higher than window height */
  min-height: 100vh;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-family: sans-serif;
  /* outline: 10px solid hotpink; */
  /* turn above on to see the edge of panels */
}

/* colours */
.color-violet {
  background-color: #ffd6a5;
}
.color-indigo {
  background-color: #fdffb6;
}
.color-blue {
  background-color: #caffbf;
}
.color-green {
  background-color: #9bf6ff;
}
.color-yellow {
  background-color: #a0c4ff;
}
.color-orange {
  background-color: #bdb2ff;
}
.color-red {
  background-color: #ffc6ff;
}

/* styling for demo, can ignore */
body {
  text-align: center;
  font-size: 120%;
  line-height: 1.618;
}
h1, h2 {
  font-size: 3em;
  letter-spacing: -0.05em;
  line-height: 1.1;
}
p {
  max-width: 30em;
  margin-bottom: 1.618em;
}
a {
  color: #4332CF;
}</style>  </head>  
  <body>
<div class="panel" data-color="white">
    <div>
      <h1>Magic scrolling colours</h1>
      <p></p>
  </div>
</div>
<div class="panel" data-color="violet">
  <h2>First panel</h2>
</div>
<div class="panel" data-color="indigo">
  <h2>Second panel</h2>
</div>
<div class="panel" data-color="blue">
  <h2>Third panel</h2>
</div>
<div class="panel" data-color="green">
  <h2>Fourth panel</h2>
</div>
<div class="panel" data-color="yellow">
  <h2>Fifth panel</h2>
</div>
<div class="panel" data-color="orange">
  <h2>Sixth panel</h2>
</div>
<div class="panel" data-color="red">
  <h2>Seventh panel</h2>
</div>
    <script>$(window).scroll(function() {
  
  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');
  
  // Change 33% earlier than scroll position so colour is there when you arrive.
  var scroll = $window.scrollTop() + ($window.height() / 3);
 
  $panel.each(function () {
    var $this = $(this);
    
    // if position is within range of this panel.
    // So position of (position of top of div <= scroll position) && (position of bottom of div > scroll position).
    // Remember we set the scroll to 33% earlier in scroll var.
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
          
      // Remove all classes on body with color-
      $body.removeClass(function (index, css) {
        return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
      });
       
      // Add class of currently active div
      $body.addClass('color-' + $(this).data('color'));
    }
  });    
  
}).scroll();</script>
  </body>
</html>