BACKGROUND COLOR CHANGE ON PAGE SCROLL - Elementor

[@andreaegli]

Let me know if you found this useful and if it worked for you!

[@fernandopaiva85]

You are the only one that teaches how to do it with Elementor! Thank you so much for sharing this, Andrea! You're awesome!

[@andreaegli]

Thank you so much for your kind words, Fernando! Let me know if you have any requests for future videos🤓

[@erika_huber]

I have been looking for someone that uses JS and custom CSS with Elementor. Please make more of these videos! Loving it! Thank you ❤

[@andreaegli]

Thank you so much, Erika! Will do!💜

[@ndayanaparra]

Desde hace AÑOS esperaba este tutorial y por fin lo encontré! GRACIAS

[@andreaegli]

You're welcome🤓

[@brandedright]

Definitely helped a lot! Thanks, Andrea. I'm very grateful for your wisdom sharing and creativity. Tbh I'm not an expert at code- not even an amateur, just an enthusiast. I don't know if you've experienced the "Tumblr Era" where everyone was having fun with their blogs on Tumblr and messing around with the themes (which actually needed coding) haha! That's where I started to develop an interest in HTML & Java. I just never got to actually focus on it and learn. So I'm here to express my gratitude for sharing your knowledge and the websites/resources to learn these things. Again, awesome video. Hope to see more of you here! Cheers

[@andreaegli]

Thank you so much, Alex! oh, trust me, not an expert either😅 No, I haven't but I heard good things about that era😂 I only started playing around with code in 2021. It's really good knowing some code. Before that I didn't even know the difference between Java and Javascript. You are welcome!!!! New video every week🤓

[@EjenSky-z9p]

Thank you so much!

[@pascal8063]

Hey @andreaegli , does the custom css code you find in the page settings appear automatically or do I have to paste it from somewhere? My custom css field is empty when I open it and in your notion file is only the html code.

[@andreaegli]

Hey Pascal! No, the CSS needs to be added too. I don't have it in the Notion file, seems like I forgot to add it or I delete it, who knows. If you want this to work, you will need to follow the video step-by-step I'm afraid. I don't have the code written anywhere anymore so...sorry about that. Just pause the part where I show the CSS code and write it in your site settings > custom CSS.

[@seekknowledge1928]

Black to white conversion or White to black conversion? Could show us ?

[@jeffrey6283]

Is this also possible to get the same effect with full size images instead of background colors? If so, do you have a comparable tutorial or can you tell me how to do this? :) Thanks!

[@umarjoyia2128]

Thank god I found you!!!!!!!!!!!!!

[@TRUE.HORROR]

but i see only one code where the other cods ?

[@edwardnewman4372]

Thanks it works, however, the colour transition is sharp. How can I ensure its a smooth transition, any ideas?

[@MBSounds]

Thank you so much for the tutorial! Either I am stupid or dont know anything about custom css, but how do I create the Code of the side settings? I would really appreciate a response, I would love to integrate this effect into my website!

[@darndarn99]

This was so cool 👌 imaging is we could create a gradual gradient change on scroll 😱😱😱

[@ShahbazAli-ni6bf]

Can we do this for single sticky section color change according to other sections colors or behalf of their id?

[@yogvaghela]

It doesn't work on mobile and didn't show up on any other browser except for the one I am logged in from

[@PhilippEnders-nn5in]

Hi Andrea, the function does not work for me on mobile and tablet. works as should on desktop. do you have any idea why this could be??

[@wielandsmith]

It works! Can this be done with images?

[@andreaegli]

🤓 no idea, I’ve never thought of trying this with images but it should work

[@floklo]

Love your videos. they are perfect for learning all element or functions! but the link with the code is doesn't work any more? could you reload it? thanks

[@andreaegli]

thank you! check again, Notion had some issues today

[@floklo]

@@andreaegli thank you so much! is back online and everything is working! love it!

[@bryanfarfan5208]

I have some problems, i can try the tutorial and follow all steps but not work when i try.

[@naimislam4316]

Please make more this type videos

[@andreaegli]

Could you be more specific, what type exactly?

[@albertoohayon3817]

Hi Andrea, is this code compatible with Safari? not working for me :/

[@745651]

Another challenge: change the color of fixed text on vertical scroll according to sections…

[@marcomigliorino8698]

Ciao from Italy :) this code dont work on safari :(

[@alemikdigital]

hi @marcomigliorino8698, I just watched this video today and you are correct that the code doesn't work on safari , Im new to commenting but have dev experience and I have update the jquery code to suit modern browsers , if it helps you can try the below code in the HTML widget of elementor 1. JavaScript , that only loads on browser load time and if Javascript is not disabled. ```javascript window.addEventListener('scroll', () => { const body = document.body; const panels = document.querySelectorAll('.panel'); // this will select all panels with the class name panel const scrollPosition = window.scrollY + (window.innerHeight / 2); panels.forEach(panel => { const panelTop = panel.offsetTop; const panelBottom = panelTop + panel.offsetHeight; if (scrollPosition >= panelTop && scrollPosition < panelBottom) { // we will then remove existing custom color classes (if any) body.classList.remove(...body.classList); // Spread syntax for efficient removal // we then want to add the color class based on panel's data-color attribute , the one we have set under attribute in elementor based on the above video body.classList.add(`color-${panel.dataset.color}`); } }); }); ``` 2. Custom CSS code if you want don't want to update the site wide css , you can on any one section /container / page under Advanced-->Custom CSS add the code as per video above ```custom-css body { background-color: #f4f4f4; transition: background-colour 1s ease; } .color-copper { background-color: #c1532f !important; } .color-purple { background-color: #6d46f1 !important; } .color-orange { background-color: #f19031 !important; } .color-red { background-color: #93c179 !important; } 3. Attributes data-color| ``` and under Attributes --> Custom Attributes --> for key|value as per the video above you can use ```atributes example data-color|orange ```