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.

Choose divi column layout

Add a text module

Then add a new text module to the column.

Add divi text module

Contents

For the contents column, paste the following HTML code into the box contents:

Save fragment code

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
Divi text customization
  • 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.

Divi text module spacing configuration

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.

Add divi separator module
Higher separation settings

Open the separator settings and select NO to display the separator.

divi text background scrolling effects

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
Color separator configuration

Then update the height of the divider on the phone screen as follows:

  • Height: 15px (telephone)
Divi separator configuration

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.

Divider insert

Then invert the colors on the gradient background.

Gradient background insertion

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
Customize divi line parameter

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.

Seperator insertion

Then select NO to display the separator.

Show divi seprator

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%
Divi rear divider

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
Divider height divider

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
Index separator
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
Animation configuration

Add section spacing

To create a temporary scrolling space to test the design, add the following to the section:

  • Margin: 80vh above, 80vh below
Configuration size section divi

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!