Have you ever created a Divi page using the Fullwidth Header module and activated the Scroll Down button? We love the style, especially if the Fullwidth Header is set to fullscreen mode. Then the Scroll Down button is a nice indicator that there actually is more content on the page.

Add an animation to the Show More button

All you have to do to give the Scroll Down button a nice little animation is to open the pages or posts setting and add the following CSS:

.et_pb_fullwidth_header .et-pb-icon.scroll-down {
	animation: fullwidth-header-bounce 2.2s ease-out infinite;
}
@keyframes fullwidth-header-bounce {
  0% { transform:translateY(0%); }
  12.5% { transform:translateY(20%); }
  25% { transform:translateY(0%); }
}

Of course, you could also add this to your custom CSS to apply it site-wide but personally, we prefer to only have this on pages where we really want it. Mostly when we use the Fullwidth Header module as the first module on that page. If we use it somewhere else on the page, we usually don’t show the Scroll Down button or we don’t want it to animate because it can also distract the user from the content.

Removing the animation on page scroll

Speaking about which. Wouldn’t it be nice if we could somehow make the animation stop once the user has scrolled? As soon as the user realizes that there is more content available, we don’t need to draw his attention to the animating button, right? Moreover, it could be distracting from the great page he should actually look at. So how could we do that?

Let us show you what we came up with to solve that problem. It’s actually quite simple. If you know a better way, we would love to hear all about it. Feel free to leave us a comment if you have a better solution. Anyways, this is how we do it.

Add a custom class

The first step is to add a custom class to the Fullwidth Header module so we can better address it via CSS and JavaScript. No worries if you don’t know how to program, this is very easy and you don’t even have to leave the Divi Builder. Open the module settings and head over to the Advanced tab and add the frontpage-header to the CSS class field. Save the module and you are done.

Change the CSS

Next change the CSS you added in part 1 of this tutorial. Instead of selecting the et_pb_fullwidth_header, we now can use our own CSS class. Simply replace the element like so:

.frontpage-header .et-pb-icon.scroll-down {
	animation: fullwidth-header-bounce 2.2s ease-out infinite;
}
@keyframes fullwidth-header-bounce {
  0% { transform:translateY(0%); }
  12.5% { transform:translateY(20%); }
  25% { transform:translateY(0%); }
}

Add the jQuery magic

The final step is to add some JavaScript code. The idea is to remove the frontpage-header class once the user scrolls. This will cause our CSS selection to fail and therefore the animation will not be applied anymore. But before we can add any JS code, we need a location to put it in. We don’t recommend adding it site-wide so the best solution we could come up with was to simply add a Code module next to the Fullwidth Header module.

In this code module, add the following code. Make sure you include the <script> tags:

<script>
jQuery( window ).scroll(function() {
 jQuery(".frontpage-header").removeClass("frontpage-header");
});
</script>

As you see, the script is very simple. We use jQuery to get the window. We then add an anonymous function that gets executed every time the user scrolls. Inside the function, we simply select our frontpage-header and remove the class from the element. Once the class has been removed, the animation stops. Easy, right?

Final thoughts

We think animating the Scroll Down button is a huge benefit. Maybe for you and us, it is always clear that you at least try out to scroll a page and most people will also notice the Scroll Down button even if it is not animating but believe it or not, we had customers in the past who called us in confusion, asking why their page only consists of one image.

Once we added the animation, they immediately noticed the button and were satisfied. Don’t judge others based on your own standards and assume everybody is on the same page. You are probably one of the 10 % of people who knows the web the best but there are millions of users who are not familiar with the latest website designs so be indulgent and offer them some help when using your websites. ✌️