In this tutorial, we are going to show you how to change the background color of an Elementor element on scroll using Premium Magic Scroll Addon, but before we start if you don’t know what Elementor Magic Scroll Addon is, please visit this documentation article of Elementor Magic Scroll global addon to get to know more about this new feature and the options included in it.
- You will need Premium Addons PRO plugin installed and activated on your website.
- Also, make sure that Elementor Magic Scroll feature and Premium Dual Heading widget are enabled so you can find them in the Elementor editor. Check this article to know how to do that.
- Premium Addons works only with Elementor Page Builder plugin so you will need to have it installed and activated as well.
Change Background Color on Scroll in Elementor.
1- Setup Your Elementor Section.
In this example, we will change the background color of an Elementor section on section. To achieve that, we will add a CSS ID to the Elementor Section and use this ID to change the section’s background color.
To add CSS ID, navigate to your Elementor Section Settings -> Advanced tab -> Advanced tab, and set the section ID in the “CSS ID’’ input field. For this tutorial we are going to use this ID “bg-color”.
2. Use Dual Heading widget.
For this tutorial, we are going to use three columns section and add four Elementor Dual Heading widgets to the first and third columns.
We will use these four Elementor Dual Heading widgets to change the background color of the parent section. Also, we will show and hide the headings using Fade In and Fade Out scroll animation effects from Elementor Magic Scroll Addon.
Now, drag Premium Dual Heading widget and drop it into your first column of the desired section. We added the below settings to achieve this layout but you can customize and create your own Elementor Dual Heading settings. Please check this article to know more about Premium Dual Heading settings.
- HTML Tag: Set to H1.
- Display: Set to Block.
- Alignment: Set to Center.
Dual Heading > Style: From the Style tab, you can keep adjusting the Colors, adding some Margins & Spacing, and editing the Typography.
3- Change Section Background Color Using Elementor Magic Scroll
Jump to Elementor Dual Heading widget’s Advanced tab, scroll down until you see Premium Magic Scroll, switch it on, then click on “Add Item”. From the repeater item that appeared to you choose Background Color from the Select Animation dropdown list.
From the repeater item that appeared to you, adjust its settings as follows.
A. Repeater Item Settings
- Apply Animation On: Select “Custom CSS Selector”.
- CSS Selector: Insert the CSS Selector for the section that you want to change its background color. for this tutorial it was (#bg-color).
Quick Note* we used the ‘#‘ symbol here before the selector because it’s a CSS ID and if it was CSS Class we were going to use the ‘.‘ symbol before the CSS selector.
- Select Color: Choose the background color that the section will get at the end of this animation effect for this tutorial we set it to (#00B7EB).
B. Magic Scroll Settings
- How This Animation Should Work?: In our example, we used “Lock Page Scroll Until Animation Ends” because we wanted the text to be fully filled before jumping to the next Magic Scroll effect or next scene. Click here to get to know more about the other options listed under “How This Animation Should Work?” and how they actually work.
- Animation Order: Setting this option depends on your design needs. In our example, we made it “1” because we wanted it to be the first Magic Scroll animation visible in this scene.
- Decrease Animation Speed By: From here, you can adjust how fast or slow the animation should behave/work. In our example, we kept it at “3”.
- Scrub: This option helps make the animation work smoothly. In our example, we used “1.5” as a “Scrub” value.
4- Duplicate Elementor Dual Heading Widget And Change Its Settings
Now, After creating the first Elementor Dual Heading, we will copy/paste it to the first and the third column of the containing section. After that, we will change the text of the First Heading.
For Premium Magic Scroll settings, In our example, we changed the color option from item repeater settings to create different background colors on the page scroll.
And, we changed the Animation Order option for Magic Scroll settings to make them work in sequence. We set the Animation Order values for Elementor Dual Headings widgets in the first column to (1,3) and in the third column to (2,4).
Let’s Wrap Up!
As you can see from this simple tutorial, it’s easy to manipulate the background color of Elementor elements using Background Color animation effect from Elementor Magic Scroll Addon without the need for coding skills.
You can create more advanced animation effects, we’re looking forward to seeing what you will come up with and we encourage you to post your work in our Facebook Group and get other designers inspired.
This Post Has 2 Comments
Can you please mention how to show hide elements to achieve this ? as you did not mention how to fade in and fadeout steps here
You can simply use the Fade In and Face Out effects that exist in Magic Scroll addon.