Would you like to design a background Divi animated when scrolling the page thanks to masks and patterns? This tutorial is for you...
Adding a scroll animation to Divi and its background masks and patterns is a useful design tip that can breathe new life into your background designs. Website.
In this tutorial, we will show you how to create and animate masks and background patterns using the scroll options of Divi (no custom code needed).
To do this we will create a floating background layer using a line Divi which we will use to animate masks and background patterns when a user scrolls through a section of contents.
We think you'll like the result.
Let's start!
Preview
Here's a quick illustration of what the background scroll animation for this tutorial will look like.
The concept
The concept of this design shouldn't be too hard to grasp. We start with a section that has a gradient background.
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 row.
Next we can add a background mask to the column.
Then we add scroll effects to row and column (like scale and rotation) which will animate the pattern and mask separately in the background of the section.
When we hide the section overflow, all we see is the animation contained within the section.
Let's start by creating a page with Divi Builder
To get started, you will need to do the following:
From the WordPress dashboard, go to Pages > Add New to create a new page.
Give it a title that makes sense to you and click Use Divi Builder
Then click Start Building (Build From Scratch)
After that, you will have a blank canvas to start designing in Divi.
Read also: Divi: How to use the "Gradient Builder" to beautify your images
How to Create Animated Scrolling Background Masks and Patterns with Divi
Section background design
First, we'll skip creating a line and jump right into editing the existing default section in the theme builder.
To make our background design fill the browser, we need to add a vertical height to the section. A simple way to do this is to add a minimum height to the section.
Open section settings. Under the tab Design, update the minimum height and remove the padding as follows:
- Margin: 80 vh (Top and Bottom)
- Padding: 0px (Top and Bottom)
Designing a background gradient for the section
We can now add a custom background gradient to the section.
To add the first gradient stops, make sure the section settings are open under the tab Content. Then select the tab Background Gradient and click to add a new gradient. This will add two default gradient colors. Add the following Gradient Stops with color and position as follows:
- Gradient Stops:
- 0%: #4158d0
- 50%: #c850c0
- 100%: #ffcc70
Then change the direction of the linear gradient:
- Gradient Direction: 270 deg
Add rows to section
Now that our section is in place, add a one-column row to the section. This line will be used for our background mask and pattern scroll animation.
Next, duplicate the line you just created. This second (duplicated) line will be used for our contents as you normally would.
You should now have a top line for the background scroll animation and a line for the contents Normal.
Customize line
Now that we have our section background gradient ready, we can turn our attention to the line we're going to use for our background-on-scroll animation.
Open line settings. Under the tab Advanced, update the following:
- Position: Absolute
This will allow the line to overlap the section without taking up any real space in the document.
Now all we need to do is update the height and width so that they span the full width and height of the section. This will create the overlay we need and our second background design layer.
Under the tab Design, update the sizing options as follows:
- Aquasize Column Heights: YES
- Width: 100%
- Max Width: 100%
- Height: 100%
- Padding: 0px (Top and Bottom)
Now you may not be able to see the line, but it now perfectly covers the background of the entire section.
Create a background pattern for the line
In this example we will add the pattern Dragées as line background.
Open line settings. Under the option background, select the tab Background Pattern and update the following:
- Background Pattern: Confetti
- Pattern:
- Color: #f6bef7
- Size: Custom Size
- Width: 35 vw
- Repeat Origin: Center
NOTE : Using the VW length unit ensures that the pattern will scale with the browser, keeping the design consistent and responsive.
Add Scroll Effects to Line
Now that our background pattern is in place, we can add scroll effects to the line.
Go to the tab Advanced. Under the option Scroll Effects, update the following:
Select the tab Horizontal-Motion and update the following:
- Enable Horizontal Motion: YES
- Starting Offset: 0,5 (at 0%)
- Mid Offset: 0 (from 40% to 60%)
- Ending Offset: -0,5 (at 100%)
This will move the line background pattern starting 50 pixels to the left and ending 50 pixels to the right.
Select the "Scale Up and Down" tab and update the following:
- Enable Scaling Up and Down: YES
- Starting Scale: 150% (at 0%)
- Mid Scale: 100% (from 40% to 60%)
- Ending Scale: 150% (at 100%)
This will scale the row's background pattern when scrolling.
Select the tab « rotating » and update the following:
- Enable Rotating: YES
- Starting Rotation: 10 degrees (at 0%)
- Mid Rotation: 0 deg (from 40% to 60%)
- Ending Rotation: -10 degrees (at 100%)
KEY TIP: You need to keep the rotation to a minimum or you risk showing gaps where the line doesn't extend past the section. A good rule of thumb is to increase the scale if you want to increase the rotation. This will allow the line to pivot over the section without exposing the edges.
Add background mask with scroll effects to column
Once our row is complete, we are ready to add a background mask with scroll effects to the column of the same row. To start, let's add a background mask.
To do this, open the column setting. Under the tab BackgroundMask, update the following:
- Mask: Layer Blob
- Color: #ffffff
- Mask Transform: Horizontal Flip, Inversion
Add scroll effects to column
Now that our background mask is in place, we can add scroll effects to the column. Keep in mind that the column already has scrolling effects inherited from the parent row.
All we're going to do is rotate the column in the opposite direction of the row to achieve more separation of the mask and pattern for the duration of the scroll.
Go to the tab Advanced. Under options Scroll Effects, select the tab Rotating and update the following:
- Enable Rotating: YES
- Starting Rotation: -15 degrees (at 0%)
- Mid Rotation: 0 deg (from 40% to 60%)
- Ending Rotation: 15 degrees (at 100%)
Hide section overflow
Currently, the line remains visible whenever scrolling causes it to extend beyond the section.
To clean this 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
Now it looks better.
See also: Divi: 12 combinations of masks and background patterns
Adding content to the line created for this purpose
At this point, the background mask and pattern scroll animation are complete. All we have to do is add the content we want to the line we created earlier for the content.
For this example, we've added a dummy title so we can see what the background animation will look like with static text.
Final result
Let's take a look at the end result of our design.
Download DIVI now!!!
Conclusion
It's amazing how easy it is to create such beautiful backgrounds with Divi's background options. Plus, adding animation with Divi's scroll effects brings new life to these designs.
For a different look, you can try different masks and patterns on each layer. If you want more inspiration on how to use the masks and patterns background, check out these 12 background mask and pattern combinations
We hope this tutorial will inspire you for your next Divi projects. If you have any concerns or suggestions, find us in the comments section to talk about it.
You can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites.
Do not hesitate to also consult our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
