Background color change on scroll

siphonstrategy

This is pretty neat. A customer showed me this Elementor Plugin that let's you change the background, by section, as you scroll.

So my question is - has anyone pulled off something like this in Duda yet?

https://premiumaddons.com/elementor-background-transition-widget/

Aj_Cre8

It would probably be best to do this with some CSS and JS.

Add this css to your site.css in dev mode.

.scrolledBG{
  height:1920px !important;
  transition: background-color: 0.3s !important;
}

Then this JS to your body end, or header html.

window.addEventListener('scroll', function() {
    var element = document.querySelector('.dynamic-bg');
    var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    
    if (scrollPercentage > 0.5) { // Adjust threshold as needed
        element.style.backgroundColor = 'blue'; // Change to desired color
    } else {
        element.style.backgroundColor = 'red'; // Change to desired color
    }
});

Anywhere you want the effect, right click on that section, edit html/css and add the above css class to the section.

<div class="scrolledBG">CONTENT GOES HERE</div>

NOTE: THIS WAS NOT TESTED IN DUDA.