Parallax with Divi
Namaste! Over in one of the Facebook groups someone asked how they could duplicate this page with Divi. Basically, it is a parallax scrolling page where as you scroll the next background image rolls in. They combined this with a javascript library to fly some text boxes in from the side. Just for fun I looked up the interest in parallax scrolling over time according to Google trends. Note-I have no idea what the Y-axis represents! However, you can see that while interest has fallen somewhat, it is still a relatively searched for term.
At any point, I put together a short tutorial on how to do this simply just using Divi without the javascript library. The only drawback is that the animation is unidirectional. If there is a demand, I’ll write a follow-up that will incorporate some javascript to make it bi-directional.
[button link=”http://springhilldesign.net/parallax-demo/” type=”big” newwindow=”yes”] Demo[/button]
I’m going to assume you are using a child theme with a style sheet. If not, do yourself a big favor and learn how not to lose all your customization when the next Divi update comes! So start with a fresh Divi page and add in a regular section with a full-width row. I then added in a text module and a button module. For each additional picture panel, you want to put in another standard section, full-width row, with a button module on top of a text module, as shown below, but we will start with one and then clone it to save some typing.
Okay, now for some styling. Go into the top section settings (the three parallel lines on the left side of the blue box). Upload your first image and then go into the custom CSS. I gave this section a CSS ID: theFirst, and a CSS Class: sectionContainer. These will allow us to target the section by ID for navigation and add styling later.
Next, go into your row module settings (three lines in the teal/green box). Under general setting click yes on “Make This Row Fullwidth” and “Use Custom Gutter Width.” Set the width to 1. For the padding put 0 in all 4 boxes.
Put whatever content and styling you would like into the text module. In the button module go into the settings and for the Button URL: add “#theSecond” and center align the button. Clicking on the button will now take us to the place on the page that has an ID of “theSecond”. Under custom CSS add a class of “downArrow” for styling. I also added “margin-top: 5vh;” to the main element to move it down the page a little, but you can style it how you would like on your page. We are finished with the “header” section, so let’s start modifying the subsequent sections.
Again, open the section settings (blue box) and upload your background image. In the Custom CSS tab give it a CSS ID: theSecond, and a CSS Class: sectionContainer. Open the row settings (teal/green box) and give it a CSS Class: sectionContainer. Next, open your Button Module settings and give it a URL of “#theThird” and center align the button as above. In the Custom CSS tab we will add two classes separated by a space, “downArrow anchored”.
Open the text module settings and add whatever content and styling you wish. I want to somewhat duplicate the cinema site, so I’m using dark text oriented left that I will put onto a white background with CSS. Open up the Custom CSS tab and add four classes separated by spaces, “et-waypoint et_pb_animation_right outlined lowRight”. So, what do these mean? The first two come from Divi. They will animate the text module to fly in from the right when the page scroll hits this point. The last two classes give me a bordered white background and place the text at the lower right side of the section.
Now that we have that set up we will clone the section by clicking on the two squares symbol on the blue box of our second section. Do this as many times as you need for your images. In each of the new sections we will have to make several changes. First up, change the background picture in the section settings. Also, change the CSS ID: based on its position. So, the third section I named theThird, the fourth – theFourth, etc… You can choose to name them how you would like. Next, change the Button URL to the ID of the section that comes next. In my case the Button URL for the third section is “theFourth”, meaning that clicking the button will take me from the third to the fourth section. So, if you use different names, just make sure that the Button URL matches. The only other change I made in my subsequent sections was to alternate the text animations and position. To get you text to fly in from the left and stay at the left use the classes, “et-waypoint et_pb_animation_left outlined lowLeft”. You can mix and match the animation and position any way you would like. Continue with these changes for the rest of the sections.
Okay, finally the CSS, there is a link at the bottom of the post to download this code. I won’t go through this in detail, but if there are any questions leave a comment or e-mail me.
The .sectionContainer styles our images. I chose a section height of 90vh because it allows the bottom fixed button to come into view before the previous section is off screen. You can change this, but make sure to also change the height in the .rowContainer to the same value.
The next section, .downArrow, gives a base styling to all of the arrows. I have also put a link to the “down-arrow.svg” image at the bottom of the post. In order to use it you will have put it in a folder named “img” in your child theme folder – where your style.css file is located.
The fourth section causes the button to stick to the bottom of the page and take on an elongated appearance.
The final four sections give our text boxes their size, background, and position.
And that is it! You have your parallex page. However, as I wrote above, scrolling back up the page doesn’t make the animation replay. You would need some custom javascript to get that to work – maybe for a future tutorial. As always, I’m open for questions/requests for new tutorials and not just Divi related.
Metta
