In this Bricks Builder tutorial, I’ll show you a simple way to make your section backgrounds change color on scroll.
Timestamps:
- 0:00 Intro / Demo
- 0:45 Page Structure
- 1:34 Add Container Attributes
- 2:39 Add ID to Section
- 2:57 Add CSS and JavaScript Code
- 5:58 Frontend Testing
CSS Code
#bg-section {
transition: background-color 1s ease;
background-color: #eee;
}
#bg-section[bg-color="green"] {
background-color: #2f6b4f;
}
#bg-section[bg-color="blue"] {
background-color: #2f4f7f;
}
#bg-section[bg-color="red"] {
background-color: #8a3b3b;
}
#bg-section[bg-color="purple"] {
background-color: #5a3b7a;
}
JavaScript Code
<script>
document.addEventListener("DOMContentLoaded", () => {
const bg = document.querySelector("#bg-section");
const sections = document.querySelectorAll("[data-color]");
// CHANGE THIS ONLY
const triggerVH = 0.5;
function updateBg() {
const triggerPoint = window.innerHeight * triggerVH;
const scrollPos = window.scrollY + triggerPoint;
let activeColor = null;
sections.forEach(section => {
const rect = section.getBoundingClientRect();
const top = rect.top + window.scrollY;
const bottom = top + rect.height;
const color = section.dataset.color;
if (scrollPos >= top && scrollPos < bottom) {
activeColor = color;
}
});
if (activeColor) {
bg.setAttribute("bg-color", activeColor);
} else {
bg.removeAttribute("bg-color");
}
}
window.addEventListener("scroll", updateBg, { passive: true });
updateBg();
});
</script>
