The Scroll Sequence plugin allows you to create animated image sequences that play out as you scroll up and down the page. These sequences have the potential to make for eye-catching backgrounds to your Divi Builder content. But actually setting one as a background is not so easy. This is a first attempt at pulling it off…
It's not pretty, but here's an example of what I'm talking about – a row containing a blurb module, layered over the "watch" animation provided on the Scroll Sequence site. The blurb module stays in place over the watch, while the watch rotates in the background during scrolling.
First, a very quick rundown of the problem. A scroll sequence is basically a set of images that are displayed in order at particular points in the scroll down the page. The effect that of temporarily sticky piece of content. When you scroll down the page appears to pause at the image (while you keep scrolling) and the image animates. Then once the images have all been displayed, the scrolling continues to the content below as normal.
If the scroll sequence actually was pausing the scroll at an animated image, it would be relatively straight-forward to layer another element (e.g. a Divi Builder element) over the top of it. What actually happens, however, is that the images are laid out (overlapping in the way a deck of cards spread across a table would) in a very tall section of content. As you scroll down this content, the closest image to your current scroll position is displayed.
This means that just layering a Divi Builder element over the top won't work. As you're actually still scrolling down the page, the element would just be scrolled off the page as you scrolled the animation.
The basis of our solution here is to use absolute positioning to layer a Divi Builder element on top of the scroll sequence. We're going to use a row for this as it seems to simplify things slightly over using a full section. Then at the right time, we'll make the row sticky so that it stays in place of the scroll sequence as we scroll the page.
Step 1: Create the layout
For this example, we'll use a section with two rows. The first contains the content to be overlaid, in this case a blurb module. The second contains a code module which has nothing but the scrollsequence shortcode, with the id of our pre-prepared scrollsequence custom post:
Step 2: Configure the Section
There's nothing much to do to the section itself. The only thing to be done is to remove the top padding so that when we make the first row absolute, the top of both rows are at the same point.
Step 3: Configure the Overlay Row
The bulk of the work is in configuring the first, overlaid, row. We need to:
- Set the height of the row to match the visible height of the scrollsequence, which in my case turned out to be 1000px
- Set some top padding on the overlay to move the blurb module down vertically, into a good position over the scrollsequence
- Position the element absolutely so that it is positioned over the scrollsequence. While Divi has an option to set absolute positioning, it breaks the sticky positioning that we need to set, so we'll do it via CSS instead.
- Center the row content. Again, this is done via CSS to avoid conflict with the sticky positioning
- Next we need to increase the z-index to bring the blurb row in front of the scrollsequence row
- Finally, we make the blurb row sticky and use Divi's options to configure it to stick at a point below the top of the page which lines up with the apparent sticky position of the scrollsequence row (an offset of -120px achieved this in my example). We configure the stickiness to end at the bottom of the section so that our overlay scrolls out of view at the same time the scrollsequence images do.
Here's the set of options I configured on the blurb row to achieve all of this:
position:absolute; left: 50% !important; -webkit-transform: translateX(-50%) !important; transform: translateX(-50%) !important;
Step 4: Configure Scroll Sequence row's column
We're almost done, but there remains one more thing to be done. We need to turn off the float property set on the column containing the scroll sequence, to allow the scroll sequence to move to the top of the section. This can be done by going into the row settings for the row containing the scroll sequence code module, and opening the settings for the column. Then configure the column like so:
Here's the copy-and-pasteable version:
float: initial !important;
That should produce a basic example of a Divi Builder row overlaying a Scroll Sequence. You'll likely need to make some tweaks to this to suit your own needs. Some of the values, such as heights and padding can probably be figured out with a bit of trial and error, and may also need to be configured differently for mobile / tablet views. I hope this gives you a starting point, but if you get stuck please feel free to drop me a comment (with a link to what you have so far, if possible).