Facebook-f Instagram Linkedin-in

On Scroll change Background Color

On scroll change background color animation with minimal HTML + CSS + jQuery to highlight your CTA sections or Hero Product.

Easy to implement code

HTML :

<section>
 <div class="shape shape1">
  <h2>Vertical Scroll</h2>
 </div>

 <div class="shape shape2">
  <h2>Vertical Scroll</h2>
 </div>

 <h2>Vertical Scroll</h2>
</section>

CSS :

section {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100vh;
   background: #fdfaf1;
}

section .shape {
   position: absolute;
   width: 100%;
   height: 100%;
   z-index: 10;
}

section .shape.shape1 {
   background-color: #DFB42F;
   clip-path: circle(200px at 0 0);
}

section .shape.shape2 {
   background-color: #2D75EB;
   clip-path: circle(150px at 100% 100%);
}

section h2 {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 100%;
   text-align: center;
   color: #fff;
   font-size: 12em;
}

section .shape.shape1 h2 {
   color: transparent;
   -webkit-text-stroke: 3px #333;
}

section .shape.shape2 h2 {
   color: transparent;
   -webkit-text-stroke: 3px #333;
}

JQUERY :

const shape1 = document.querySelector(".shape1");
const shape2 = document.querySelector(".shape2");

const modifier = window.innerWidth / 520;

window.addEventListener("scroll", () => {

const scrollY = window.scrollY;
shape1.style.clipPath = "circle(" + scrollY * modifier + "px at 0 0)";
shape2.style.clipPath = "circle(" + scrollY * modifier + "px at 100% 100%)";

});

LIVE PREVIEW :

Discover more Articles