Do you want to change the background color on scroll in WordPress? Changing the background color of a section on a scroll can enhance the visual appeal of your website and create a memorable impact on your visitors.
With the Container block from Nexter Blocks, you can effortlessly change the background color of a section on scroll in WordPress.
To check the complete feature overview documentation of the Nexter Blocks Container block, click here.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
Add the Container block with the appropriate layout to the page and follow the steps –
1. Go to Style > Background Deep Layer.
2. Select On Scroll Animation from the Select Background Option dropdown.
3. In the item List section, you’ll find three items by default.
4. Open an item, and in the Background section, you have to add either a solid background color or a gradient.
5. You have to add one more item and set a background color to see the color change effect on the scroll.
You can click on the + Add Item button to add more background colors.
6. From the On Scroll Change dropdown, you can set the background color change effect. Here, you’ll find two options.
- Gradient Like Effect – With this option, the colors added to the repeater items will change gradually with a transition, creating a gradient color effect as you scroll.
- Direct Color Change Effect – With this option, the colors added to the repeater items will change instantly as you scroll.
Select the option as per your requirements. Let’s select Direct Color Change Effect here.
Note: For the Gradient Like Effect you can set the animation duration for changing background colors from Transition Duration (s) section.
Now, you’ll see the background color change as you scroll.
