Change Background Color On Scroll With Elementor Pro

kaycinho

Change Background Color On Scroll With Elementor Pro

August 19, 2021
, 2:01 pm
, Skills, Tutorials, Web design, Web development

Change Background Color On Scroll (tutorial with Elementor Pro)

DISCLAIMER: I often review / link to products & services that I love and think you may find of interest. When you purchase a product/service through one of my link, I receive a commission, which helps me producing free content (you don’t pay anything extra!).

hello, I’m Kaycinho, The Digital Alchemist, and today I’m going to teach you how to change background colors on scroll with Elementor Pro.

Let’s give credit where it’s due: this tutorial is based on a codepen from by Timo Kahl.

Change Background Color On Scroll (tutorial with Elementor Pro)

This tutorial is video based of course, but in case you need some time stamps :

0:00 – Change background color on scroll with Elementor Pro
0:08 – Pre-requisites
1:38 – Credits
1:45 – Adding the JS code
2:59 – Creating a page
3:25 – Adding the css code
4:02 – Creating the content
9:41 – One Little Issue
10:08 – Troubleshooting colors
10:40 – Tablet & Mobile
10:52 – Editing mode drawback
11:54 – Automatically Sliding Text

JS Code

In Wp > Simple Custom CSS and JS -> create a new JS document and paste the following code:

				
					<script type="text/javascript">
jQuery(document).ready(function( jQuery ) {
	jQuery(window).on('scroll touchmove', function() {

		if (jQuery(document).scrollTop() >= jQuery('#one').position().top) {
			jQuery('body').css('background', jQuery('#one').attr('data-color'));
		}

		if (jQuery(document).scrollTop() > jQuery('#two').position().top) {
			jQuery('body').css('background', jQuery('#two').attr('data-color'));
		}

		if (jQuery(document).scrollTop() > jQuery('#three').position().top) {
			jQuery('body').css('background', jQuery('#three').attr('data-color'));
		}
		
		if (jQuery(document).scrollTop() > jQuery('#four').position().top) {
			jQuery('body').css('background', jQuery('#four').attr('data-color'));
		}
		
		if (jQuery(document).scrollTop() > jQuery('#five').position().top) {
			jQuery('body').css('background', jQuery('#five').attr('data-color'));
		}

	});
})(jQuery);
</script>

CSS (page level)

While editing your page with Elementor Pro, click on the gear icon (bottom left corner of the editor page), then Advanced > Custom Css and paste the following code:

				
					body {
  background:#333333;
  transition: all 1200ms ease-out;
  will-change: background;
}

CSS – Color Attributes

Edit the section you wish to add a changing background color to
Then go to Advanced > Attributes and paste the codes below (1 CODE PER SECTION)

				
					data-color|#000000

				
					data-color|#231E81

				
					data-color|#C5DA30

				
					data-color|#FFFFFF

				
					data-color|#231E81

Your turn!

I hope this tutorial will help you create stunning websites with Elementor Pro!

If you watched the companion video and if you like it, please give it a thumbs up, as it really helps growing the Youtube channel – It does really help, and it doesn’t cost you a thing!.

Oh, if you want to know how to create a beautiful branding for yourself, your business or for your clients, you can download (totally free) my branding guidelines template by clicking here.

So, that’s it for this tutorial, I hope to see you around here or on the Youtube channel, and in the meantime, don’t forget to invest in YOUR success!