Make Divi Fullwidth Header Scroll Down Button bounce (until the site is scrolled)

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.

However, since it is a static button, it doesn’t draw that much attention to it. Wouldn’t it be nice if there was a way to change that? A way to make the button jiggle or bounce to draw the users attention? Well the good news is: there is! And it might be easier than you think.

Add a 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:

1

2

3

4

5

6

7

8

.et_pb_fullwidth_header.et-pb-icon.scroll-down{

animation:fullwidth-header-bounce2.2sease-out infinite;

}

@keyframesfullwidth-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 quiet 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 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:

1

2

3

4

5

6

7

8

.frontpage-header.et-pb-icon.scroll-down{

animation:fullwidth-header-bounce2.2sease-out infinite;

}

@keyframesfullwidth-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 therefor 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 to add 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:

1

2

3

4

5

<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 a anonymous function which 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. ✌️

1 Comment

mike
on 28. June 2018 at 20:35

hi, is it possible to add the same animating scroll down button to the slider module of divi? if yes how? 🙂 thanks!

We use cookies to ensure that we give you the best experience by analysing usage and traffic on our page. If you want to learn more about how we use cookies or if you want to revoke the usage of analytic programs, please visit our privacy policy.Accept!