JSFiddle - React, Tailwind, and code Playground

by mattonit

HTML

<body class="blue">
  <ul>
    <li data-background="blue"></li>
    <li data-background="red"></li>
    <li data-background="dark"></li>
    <li data-background="yellow"></li>
    <li data-background="deep-blue"></li>
    <li data-background="white"></li>
    <li data-background="beige"></li>
  </ul>
</body>

CSS

body {
  transition: background-color .8s ease;
  -webkit-transition: background-color .8s ease;
}

body.blue { background-color: #39f; }
body.red { background-color: #FF351A; }
body.dark { background-color: #222; }
body.yellow { background-color: #fd3; }
body.deep-blue { background-color: #417ABA; }
body.white { background-color: #fff; }
body.beige { background-color: #F7D693; }

li {
  height: 100vh;
  list-style-type:none;
}

JavaScript

var lis = document.querySelectorAll("[data-background]");
var heights = [];
for(var i = 0; i < lis.length; i++){
	var element = lis[i];
  var distanceFromTop = lis[i].offsetTop;
  var background = lis[i].getAttribute("data-background");
  heights.push({background: background, distance: distanceFromTop});
};

window.addEventListener("scroll", function(evt){
	var distanceFromTop = this.scrollY;
 
  heights.forEach(function(height) {
    if(height.distance < distanceFromTop) {
			document.body.className = height.background;
    }
  });
});