Creating a text background scroll animation is a unique way to add colorful animated textures to your text. Website while a user is scrolling the page. With Divi, the process is surprisingly easy once you learn a few key techniques.
In this tutorial, we will only use the power of the built-in parameters of Divi to create 3 unique designs that feature a colorful text background scrolling animation. We'll even show you how to create a dark version of each design for a whole new look.
Let's start!
Possible Outcome
Here's a look at the designs we'll be building today.
Design 1: Text background gradient with horizontal scroll effect
This first design will feature a horizontal scrolling effect that animates a colored separator module behind a text module with the screen filter.
Add a column
To get started, add a one-column row to the default section.
Add a text module
Then add a new text module to the column.
Contents
For the contents column, paste the following HTML code into the box contents:
Formatting the text
Then update the text design as follows:
- Background Color: #ffffff
- Text Font Style: TT
- Text color: # 000000
- Text size: 100 px (desktop), 40 px (phone)
- Text letter spacing: 0.15em
- Height of the line of text: 1em
- Alignment of the text: center
- Title Font: Merriweather
- Title font weight: bold
- Title font style: TT
- Header Text Alignment: Center
- Header Text Color: # 000000
- Header Text Size: 200px (Desktop), 80px (Phone)
- Title letter spacing: 0.15em
- Height of the title line: 1em
Padding and filter
Now we need to add some padding and screen filter to the text module. The filter is needed for this design to work as it is what allows the background colors / mods to show behind the text.
To add the fill and filter, update the following:
- padding: 15px high, 20px low
- Blend Mode: Screen
Note: Screen blend mode works best with black text on a white background. If we wanted to use white text on a black background, we would use the Multiply blend mode.
Upper and lower separator
Once our text module is complete, let's add some separators (above and one below the text module) for an additional design element.
Add a lower separator
Add a new separation module under the text module.
Higher separation settings
Open the separator settings and select NO to display the separator.
Then update the background and give the divider the same blend mode as the text module as follows:
- Left gradient background color: # 000000
- Gradient background color on the right: #ffffff
- Gradient Direction: 90deg
- Start Position: 48%
- End Position: 0%
- Blend Mode: Screen
Then update the height of the divider on the phone screen as follows:
- Height: 15px (telephone)
Add upper separator
To create the top divider, duplicate the previous bottom divider and drag it above the text module using the layers display area.
Then invert the colors on the gradient background.
Update line parameters
Once our upper and lower separators are in place, update the line parameters as follows:
- Gutter width: 1 (to remove the lower margins between the modules)
- Maximum width: 600 pixels (to keep a coherent design on the desktop and tablet)
- Line alignment: center
- Padding: 0px high, 0px low
- Horizontal overflow: hidden
- Vertical overflow: hidden
Create a separator for the background color of the animated text
The last element of this first design is the divider which we will use to animate the background color of the text on the scroll. To do this, add a new separation module under the lower divider.
Then select NO to display the separator.
Background divider settings
Update the separator with a gradient background as follows:
- Left gradient background color: # e02b20
- Right background gradient color: # 8300e9
- Gradient Direction: 90deg
- Start Position: 30%
- End Position: 70%
We want the height of the separator to be high enough to color all of our text in the text module and the top and bottom separators. For this design, set the height to 400px.
- Height: 400px
Then give the divider an absolute position to position it directly above the other modules. Use the Z index to place the divider behind the other modules.
- Position: Absolute
- Z index: -1
Background divider scroll effects
With the separator in position, all we have to do is move the separator behind the text using the scroll effects of Divi. For this design, we will simply add horizontal movement on the scroll.
Update the following items:
Under the Horizontal movement tab ...
Office
- Activate horizontal movement: YES
- Start offset: 6 (at 20%)
- Average offset: 0 (at 40% -60%)
- End offset: -6 (at 80%)
Phone
- Start offset: 3
- End offset: -3
Also, be sure to set the trigger for the motion effect in the middle of the clip:
- Trigger motion effect: middle of element
Add section spacing
To create a temporary scrolling space to test the design, add the following to the section:
- Margin: 80vh above, 80vh below
Latest Thoughts
The text background animation designs shown in this article would actually work just fine as a static design without the add movement on the scroll. However, the additional scrolling effects really take the design to a whole new level. Feel free to experiment with more colors and effects!
I look forward to hearing from you in the comments.
Cheers!