Earlier today I saw a couple of people asking how to create a diagonal parallax effect with Divi. One of the posts referred to a CodePen. It made me curious enough to see how hard it would be to do.  Here is how I did it.

Check out my demo 

**This is adapted from a Codepen created by MikeMooreDev to work with Divi. 

Add the CSS in the Page Specific CSS area in the top area of the Divi Builder

      

html { height: 100%;}
body { margin: 0; padding: 0; height: 100%; font-size: 16px; font-family: Arial;}
p, h1 {text-align: center; }
h1 {margin: 0; padding: 200px 0; font-size: 5em;}
.diagonal {overflow: hidden; position: relative; transform: skewY(4deg);}
.diagonal .background {background-image: url("https://unsplash.it/1920/800/?random"); background-position: 0 0; position: absolute; top: -50%; bottom: -50%; left: 0; right: 0; transform: skewY(-4deg);}
.diagonal .content {position: relative; z-index: 1; transform: skewY(-4deg); }

NOTE: Remember to Change the url for your image.


Add a standard section to your page with a one column row and add a Code Module withe the following code:



Add a second row and in the Row Module Settings set  “Make This Row Fullwidth” to Yes and “Use Custom Gutter Width” to Yes. Change the Gutter Width to 0.


Add a text module and add the CSS Class “diagonal”.


In the text tab of the text module add the following:

 <span class="background"></span>
 <div class="content">
 <h1>DIAGONAL PARALLAX</h1>
 </div>

 Note: Only work in the text tab.  By switching back and forth the <span> tags will get stripped out and the styling will be lost.

And that is the basic steps!  I hope you find this useful.  This is my first tutorial that I have created.  Any feedback on how to make it easier to follow would be appreciated!

 

Shares 0