This article was originally published on this site

Whether we are preparing a meal or designing a website, the ingredients alone will not guarantee a tasty dish or a beautiful site. It is how well we combine those elements together that makes all the difference. In this tutorial, I’m going to show you how to combine animation and image parallax in a way that you may have never considered before. If you don’t already know, animation is a built in Divi feature that can be added to any Divi element on page load. Parallax is also a Divi option that allows you to add unique movement to your background images on scroll.Today, we are going to use Divi’s built-in design settings to combine animations and parallax in all sorts of creative ways. The combination works together quite magically to create a beautiful layout of animated parallax images that look awesome as you scroll down the page.
Let’s get started!
Sneak Peek
animations and parallax
animations and parallax
animations and parallax
Download the Layout for FREE
To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.
Let’s get to the tutorial shall we?
What You Need to Get Started
To get started, you will need to have the following:

  1. The Divi Theme installed and active
  2. A new page created to build from scratch on the front end (visual builder)
  3. Images to be used for mock content. You can find the images used for this tutorial in the Life Coach Divi Layout Pack.

After that, you will have a blank canvas to start designing in Divi.
The Basic Idea
The basic idea behind this design concept centers on the use of CSS parallax on background images. Because of the way CSS parallax works, the parallax image will remain fixed and automatically fill the browser window no matter the size of the element using it. The fixed nature of the image allows you to use the same parallax image on multiple elements in Divi and then move those elements around using animation. When the animation settles, the parallax background images used will match up and work as expected when scrolling down the page.
animations and parallax
Part 1: Creating the Divi Animation and Parallax Design (Version 1)
Create a new section with a two-column (1/2 1/2) row.
animations and parallax
Before we add our modules, let’s make a few adjustments to the section and row.
Update Section and Row Settings
First, open the section settings and take out the default padding as follows:
Padding: 0px top, 0px bottom
animations and parallax
Then open the row settings and give the row a parallax background image.
Background Image: [upload image]Use Parallax Effect: YESParallax Method: CSS
Here the parallax method must be set to CSS for the design to work.
Width: 100%Max Width: 100%Padding: 10vw top, 10vw left, 10vw right
animations and parallax
Add the Text Module with Matching Parallax Background
Now we are ready to start adding our text modules to the design. The first text module is the key to this design. By applying the exact same background image and css parallax to the text module, we can get creative with the animation for a completely unique effect.
Go ahead and add a new text module to column 1.
animations and parallax
Then update the text module settings as follows:
Body Content:

<p>Hi!<br>I’m Jane…</p>

<a href=”#”>about me</a>

animations and parallax
Then give the text module the same css parallax background image you added to the row.
Background Image: [upload image]Use Parallax Effect: YESParallax Method: CSS
animations and parallax
Text Font: Fira SansText Font Weight: LightText Text Color: #ffffffText Text Size: 70pxText Line Height: 1em
animations and parallax
Link Font Style: Underline (U)Link Text Color: #ffffff (default), #881e67 (hover)Link Text Size: 30pxLink Letter Spacing: 2px
animations and parallax
Padding: 20% top, 20% bottom, 10% left, 10% right
Border Width: 20pxBorder Color: #ffffff
animations and parallax
Then adding the following animation to the text module:
Animation Style: SlideAnimation Direction: RightAnimation Duration: 1500msAnimation Intensity: 80%Animation Starting Opacity: 20%
animations and parallax
Let’s check out the effect so far…
animations and parallax
Notice how the background image of the animated text module comes to rest on the matching location of the row background. This is because they both share the same background image with the css parallax effect.
Adding the Second Text Module with a True Parallax Background Image
At this point we are ready to add our next text module. This next one will have a different background image using the true parallax effect. We will also give it some animation as well.
Add a new text module to column 2.
animations and parallax
Then update the body content with the word “my blog”.
animations and parallax
Then add a background image with the true parallax method.
Background Image: [upload image]Use Parallax Effect: YESParallax Method: True Parallax
animations and parallax
Text Font: Fira MonoText Font Style: TTText Text Alignment: centerText Text Color: #ffffffText Letter Spacing: 10pxWidth: 320pxMax Width: 320pxModule Alignment: Center
animations and parallax
Margin: (desktop): -5vw top, 4vw bottomMargin (tablet and phone): 3vw topPadding: 70px top, 70px bottom
animations and parallax
Border Width: 20pxBorder Color: #ffffff
Animation Style: SlideAnimation direction: downAnimation Delay: 200ms
animations and parallax
Creating the Third Text Module with a new Parallax Background Image
To create the third text module, duplicate the text module you just created in column 2.
animations and parallax
Then we are going to keep the background image the same but we are going to update the parallax effect with the CSS parallax method.
animations and parallax
Width: 240pxMax Width: 240pxModule Alignment: leftMargin: 0px bottomPadding: 170px top, 170px bottom, 95px left, 95px right
The custom width and the right and left padding are used to create the vertical text display which goes well with the longer module design.
animations and parallax
Then update the animation direction to up instead of down.
Animation Direction: UP
animations and parallax
Final Result
Now let’s check out the final result.
animations and parallax
Part 2: Creating the Animation and Parallax Design (version 2)
This next design is going to add a unique animation by loading the parallax background image for the row after the initial animation of the modules. To do this we will need to use a separate row strictly for the CSS parallax background image that will move behind the content. And since we will have our section background exposed initially, we can add a custom background color for our content before the row animation.
Here’s how to do it.
First, deploy the wireframe view mode. Then duplicate the row containing your text modules. Now you will have two identical rows. Next, delete the text modules inside the top row. All we really wanted to do was get a head start on the design of our top row.
animations and parallax
Next, update the settings for the top row as follows:
Height: 900px (desktop), 2000px (tablet and phone)Padding: 0px top, 0px bottom
Animation Style: SlideAnimation Direction: RightAnimation Duration: 1250msAnimation Delay: 1800ms
animations and parallax
We are giving the row a set height because the empty row will not have any height by default. So you need to make sure the height of the row is enough to cover the content of your second row with the content. We also gave the row an animation with a delay so that it will slide behind the content after the text modules appear.
Overlapping the Two Rows
Now all we have to do is bring the bottom row upward using negative margin so that it overlaps the top row with our background animation.
Open the settings for the bottom row and update the margin as follows:
Margin: -900px top (desktop), -2000px (tablet and phone)
animations and parallax
Then take out the background image with the css parallax method for the row since we will use the top row background image instead.
animations and parallax
Here is the design so far. Notice the delayed background animation in the first row and how the parallax background for the text module in column 1 matches it perfectly.
Adding a Section Background Color
To give the text modules an initial background color before the row animation, you can give a background color to the section.
Open the section settings and add the following:
Background Gradient Left Color: rgba(136,30,103,0.61)Background Gradient Right color: #881e67Gradient Type: Radial
animations and parallax
Final Result
Now let’s check out the final result.
animations and parallax
Optional Blend Mode and Animation combo
You can also get even more creative by adding a blend mode to the second row and adding a zoom animation that will work in tandem with the module animations.
Blend Mode: LuminosityAnimation Style: Zoom
animations and parallax
Here is the final result.
animations and parallax
And here is how it looks on mobile.
animations and parallax
Final Thoughts
I hope you have learned a few things along the way as we explored some unique ways to combine animation and parallax images. The results are definitely unique and I’m sure you can easily tweak this setup to build countless other combinations that will look stunning on your next project.
I look forward to hearing from you in the comments.
Cheers!