ScrollSequence as a Background in Divi

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. 

The problem

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 Solution

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:

For ease of copy and paste, here's those CSS properties:
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;

What's Next?

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).

This post may contain referral links which may earn a commission for this site

Divi Booster

Hundreds of new features for Divi
in one easy-to-use plugin

2 Comments

  1. Love your tutorial. I made my menu bar transparent and when I get rid of it, it goes to gray and I can't figure out why its grey!! Here is a link… I tried figuring it out with inspector tools and still can't figure it out. Any help would be massive!

    https://www.kickflipdigital.com/home/

    Reply
    • Hey Ken, are you making the menu bar semi-transparent by any chance? It currently has a black background (on the #main-header element) and behind that is the white background of the page. So if the menu bar is made semi-transparent, you'll get a color in-between the two – i.e. grey.

      If what you actually want is for header to overlay the background image of the room (from the "About" section), then Divi handles this case itself if you set the background color / opacity of the header in "Divi > Theme Customizer > Header & Navigation > Primary Menu Bar > Background Color".

      If you're setting the background opacity somewhere else, e.g. in custom CSS, you can move the rest of the page, including the background image, up behind the header with this CSS:

      #page-container { padding-top: 0 !important; }

      But then you need to do some more work to move the text, etc, back down… so setting the opacity in the customizer would likely be the easier way to go.

      Hope that helps!

      Reply

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.