Do you want to design a background with Divi that animates when you scroll the page, thanks to masks and patterns? This tutorial has got you covered...
Adding scroll animations to Divi ’s background mask
In this tutorial, we’ll show you how to use Divi (no custom code required).
To do this, we’ll create a floating background telephone number identifier philippines layer using a Divi line , which we’ll use to animate our mask and background pattern as users scroll through a section’s content .
Let’s get started!
Overview
Here is a brief description of the background scrolling animation for this tutorial.
Animate Divi background when scrolling the page thanks to masking and patterns
The concept
The concept of this design should not be difficult to understand. Let’s start with the part with the gradient background.
Design animated Divi backgrounds as you scroll using masks and patterns
Then we create a line that is positioned (absolute) so that it completely covers the section (like an overlay). We can add a background pattern to the line.
Next we can add a background mask to the column.
We then add scrolling effects to the rows and columns (like scaling and rotation), which will animate the pattern and mask respectively in the background of that section.
Design animated Divi backgrounds as you scroll using masks and patterns
When we hide the section overflow, all we see is the animation contained within that section.
Animate Divi background when scrolling the page thanks to masking and patterns
Let’s start by creating a page using the Divi Builder.
To get started, you need to do the following:
From the WordPress dashboard, go to Pages > Add New to create a new page.
Design animated Divi backgrounds as you scroll using masks and patterns
Give it a title that makes sense to you, then click Use Divi Builder
erns