Add 3D Motion Scroll Effects into your Divi website can easily be done by combining a few powerful built-in Divi features – scroll effects and transform rotation. The idea is actually a simple one. Before we move elements horizontally or vertically using scroll effects, we rotate the element’s container using transform rotate. This allows the motion (on scroll) to occur on a plane in 3D space.
In this tutorial, we are going to show you how to add 3D motion scroll effects to your Divi website. To do this we will build a simple page layout featuring two design examples that displays a 3D motion scroll effect.
Let’s get started!
Here is a quick look at the design we will build together.
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.
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 do the following:
- If you haven’t yet, install and activate the Divi Theme.
- Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
- Choose the option “Build From Scratch”.
After that, you will have a blank canvas to start designing in Divi.
The Concept Explained
Creating 3D Motion Scroll Effects in Divi really involves three steps:
- Add Perspective to the Row
- Add Transform Rotation to the Column
- Add Scroll Effects to the Module(s)
Here is a quick look at how to do this…
Add Perspective to the Row
For the row settings add a custom CSS snippet that adds perspective with a value that determines how far you want the element to seem from the user/screen in 3D space once the child element is rotated.
This article was written by Jason Champagne and originally published on Elegant Themes Blog.