Starting ratio: 150% (at 0%)
Middleweight: 100% (from 40% to 60%)
End ratio: 150% (at 100%)
This will scale the background pattern of the row as you scroll.
How to Animate Scroll Masks and Background Patterns with Divi
Select the « Rotation » tab and update the following:
Enable Rotation: Yes
Starting rotation: 10 degrees (0%)
Mid rotation: 0 degrees (from 40% to 60%)
End rotation: -10 degrees (at 100%)
Key Tip: You need to keep the rotation to a minimum, otherwise you may show gaps where the line does not extend past the section. If you want to increase telephone number identifier philippines the rotation, a good rule of thumb is to increase the scale. This will allow the line to rotate over the section without exposing the
Add a background mask with scrolling effect to a column
Once our row is complete, we can add a background mask with a scrolling effect to the columns in the same row. First, let's add a background mask.
To do this, open the column settings. Under the tab Background Mask , update the following:
Mask: Layer Blob
Color: #ffffff
Mask transformation: horizontal flip, invert
Add scrolling effect to columns
Now that our background mask is in place, we can add a scroll effect to the column. Remember that the column already has a scroll effect inherited from the parent row.
All we have to do is rotate the columns in the opposite direction of the rows to achieve more separation of the mask and pattern during scrolling.
Go to the Advanced tab . Scroll under the Effects option , select the Rotation tab and update the following:
Enable Rotation: Yes
Starting rotation: -15 degrees (at 0%)
Mid rotation: 0 degrees (from 40% to 60%)
End rotation: 15 degrees (at 100%)
Hide overflow
Currently, the line remains visible as long as scrolling causes it to extend beyond that section.
Animate Divi background when scrolling the page thanks to masking and patterns
To clean it up, we need to hide the section overflow. To do this, open the section settings. Under the tab Advanced , update the Visibility options as follows:
Horizontal Overflow: Hidden
Vertical Overflow: Hidden
It looks much better now.
Animate Divi background when scrolling the page thanks to masking and patterns
See also: Divi: 12 Packs of Masks and Background Patterns
Add content to the row created for this purpose
At this point, the background mask and pattern scrolling animation are complete. All we have to do is add the content we want to the row we created earlier for the content.
For this example, we added a dummy title so we could see the effect of background animation versus static text.
Design animated Divi backgrounds as you scroll using masks and patterns
Final Result
Let's take a look at the final result of our design.
Animate Divi background when scrolling the page than