Dynamic Background with Elementor + ScrollTrigger

In this tutorial, you will learn how to use Elementor and ScrollTrigger to create a dynamic background that changes when the user scrolls to a section, and reverts to the original background when the user scrolls past it.

Step 1: Add the Section #

Create a section in the Elementor Editor and add the dynamic-bg class to it.

Step 2: Add the Javascript #

Add the following script as Custom Code in Elementor.

  1. Open the WordPress Dashboard.
  2. Go to Elementor → Custom Code → Add New
  3. Set the location to: “</body> – End“.
  4. Check the Always load jQuery option.
  5. Add the following code.
  6. Click on Publish.
  7. A popup will appear and you can set where you want to display the code. The default “Include in Entire Site” will work.
  8. Click on Save & Close.
				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
<script type="text/javascript">
( function( $ ) {
	gsap.registerPlugin( ScrollTrigger );
	$( '.dynamic-bg' ).each( function() {
		ScrollTrigger.create({
			trigger: $( this ),
			start: 'top center',
			end: 'bottom center',
			onToggle: ( instance ) => {
				if ( instance.isActive ) {
					$( instance.trigger ).addClass( 'alt-bg' );
				} else {
					$( instance.trigger ).removeClass( 'alt-bg' );
				}
			},
		});
	} );
} )( jQuery );
</script>

				
			

Step 3: Add the Styles #

Add the following (and any custom) styles as Custom CSS in the Elementor Site Settings.

  1. In the WordPress Toolbar (when viewing the site, not the Dashboard), place your mouse hover the Edit with Elementor button and click on Site Settings in the dropdown.
  2. Click on Custom CSS.
  3. Add the following (and any custom) CSS and click on Update.
				
					.dynamic-bg{
    background: #ccc; /* This is the default background color */
	transition: all 0.3s ease-in-out; /* The transition will last 0.3s you can change it to your custom preference. */
}
.alt-bg.dynamic-bg{
    color: #fff; /* You may want to change the color of the text when the background changes. */
    background: #000; /* This is the background when the user scrolls to the section. */
}
.alt-bg.dynamic-bg .elementor-heading-title{
	color: #fff; /* You may want to change the color of headings when the background changes. */
}
				
			

Add as much dynamic background sections as you want #

You can add as many dynamic sections as you want, even more than one on the same page. The script is prepared for this.

The only step you need to repeat is Step 1 (add the dynamic-bg class to the needed section).

Powered by BetterDocs

Newsletter

Subscribe and stay connected through our Newsletter. We send out important news, tips and special offers.

  • This field is for validation purposes and should be left unchanged.