Background color change on scroll

Options
siphonstrategy
siphonstrategy Member Posts: 7
edited April 4 in Ask a Question

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: 676 MVP
    Options

    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.