Creating a text background scrolling animation is a unique way to add colorful animated textures to your website text while a user is scrolling the page. With Divi, the process is surprisingly easy once you’ve learned a few key techniques.
In this tutorial, we’ll only use the power of Divi’s built-in settings to create 3 unique designs that feature colorful text background scrolling animation. We’ll even show you how to create a dark version of each design for a whole new look.
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.
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.
For column content, paste the following HTML code into the content area:
Then update the text design as follows:
- Background Color: #ffffff
- Text Font Style: TT
- Text Color: # 000000
- Text size: 100px (desktop), 40px (phone)
Text letter spacing: 0.15em
- Text line height: 1em
- Text alignment: 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
- Title line height: 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 finished, let’s add some separators (above and one below the text module) for an additional design element.
Add a lower divider
Add a new separator module below the text module.
Superior separation parameters
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 (phone)
Add a top 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 row settings
With our top and bottom separators in place, update the row settings as follows:
- Gutter width: 1 (to remove lower margins between modules)
- Maximum width: 600 pixels (to maintain a consistent design on 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’ll 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
- Gradient background color right: # 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 Divi’s scroll effects. For this design, we’re just going to add horizontal movement to the scroll.
Update the following:
Under the Horizontal movement tab …
- Activate horizontal movement: YES
- Start offset: 6 (at 20%)
- Average offset: 0 (at 40% -60%)
- End offset: -6 (to 80%)
- 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 the element
Add section spacing
To create a temporary scroll space to test the design, add the following to the section:
- Margin: 80vh at the top, 80vh at the bottom
Final thoughts on text background scrolling animation
The text background animation designs shown in this article would work just fine as a static design without the added movement on the scroll. However, the additional scrolling effects take the design to a whole new level. Feel free to experiment with more colors and effects!
For website maintenance service contact us.