Background color change on scroll

siphonstrategy
siphonstrategy Member Posts: 3
in Templates & Custom Code

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/

Answers

  • Aj_Cre8
    Aj_Cre8 Member Posts: 564 MVP

    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.

Categories