How to Display an Animated Pre-Roll “Splash” Page When Users Visit Your Website

There may be cases where you want to show an animated pre-roll splash page that people see for a few seconds when they visit your website’s home page. For example, maybe you want to show a background image with your logo in the foreground and zoom in very gently over a period of five seconds before the real home page appears. I wouldn’t say this is something you want to do often, but it might be appropriate in some cases for dramatic effect. Here is an example of what I did.

I’ll give you the code to do that in this article. I used this code in a WordPress Divi site, but it should work on any site.

Important Considerations

While this might sound pretty trivial to do, doing it wrong can have disastrous consequences for SEO, device compatibility, and usability.

Once, on an alcoholic beverage site I was hired to replace, someone implemented a custom age gate page that loaded before the home page did. The page required you to click “yes” if you were over 21 before the home page loaded. When checking the site’s SEO, I noticed it was terrible. None of the pages were ranking because the Google crawler couldn’t get past the age gate. The reason was that the home page code was not loaded until the user clicked “yes”. Therefore, it is important to add the splash page code in addition to your current home page rather than instead of your home page code.

Another tricky thing is device compatibility. Mobile devices vary in how they handle Javascript execution. If you don’t test thoroughly, you could end up having your splash page block users on mobile devices!

Finally, you need to be sure to test that the splash page does not block the page when users use the browser “back” button to return to the Home page. I’ve seen that happen as well. You’ll also want to make sure that your code gracefully degrades if the user isn’t running JavaScript. Otherwise, your home page could be blocked to everyone who has JavaScript turned off!

The solution in this article has all of these problems hammered out.

The Containers

In this example, I’m assuming you have two divs, one with class “.pre-roll” and one with class “.pre-roll-logo-container”. The first div is full-screen and contains your background image. The second div is centered and contains your logo image. The code looks like this:

<!-- PRE-ROLL ANIMATION CONTAINERS -->
<div class="pre-roll" style="background-image: url('your-background-image.jpg');"></div>
<div class="pre-roll-logo-container"><img alt="lpc" src="your-logo.png" /></div>

These divs should be somewhere at the top level of your <body> container.

If you’re using Divi, you can add this code directly to Divi’s Theme Options -> Integration -> <body> area.

You might be wondering why the logo container is not inside the background container. The reason is that we want these containers to have independent animations. If we put one inside the other, the inner one would be subject to the same animations as the outer. For example, both would have the same fade effect. We want the animations to be completely independent so that the background can fade to black while the logo gets brighter (at least in our example).

The CSS

The CSS comes in three parts.

The first part hides the pre-roll containers on all pages except for the home page, which we are assuming has the class “.home” attached to the <body>. If not, you’ll need to change “.home” to whatever class your home page has. Otherwise, the pre-roll will load on every page load!

This section is also used for hiding the pre-roll animation in other conditions, such as when you are editing the page using a visual builder. In the WordPress Divi theme, the class “.et-fb-root-ancestor” is added to the page’s <html> tag when editing. So, I also hide the pre-roll when that class is present.

/* HIDE ON ALL PAGES EXCEPT THE HOME PAGE 
    THE FIRST TWO LINES ARE TO HIDE THE PRE-ROLL ON THE DIVI VISUAL BUILDER; CAN REMOVE IF NOT USING DIVI */
.et-fb-root-ancestor .home .pre-roll,
.et-fb-root-ancestor .home .pre-roll-logo-container,
.pre-roll,
.pre-roll-logo-container {
    display: none;
}

The second part of the CSS is for the background. The first block is the starting state, and the second block is where it animates to, with the addition of the “.zoom” class by JavaScript. Again, this assumes your home page has class “.home” attached to the <body>.

/* PRE-ROLL BACKGROUND IMAGE */
.home .pre-roll {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 999999;
    transition: transform 6s, filter 6s;

    filter: brightness(100%);
}
.home .pre-roll.zoom {
    transform:scale(105%);

    filter: brightness(30%);
}

In this example, I do a slight zoom using “scale” and fade out using “brightness”. Feel free to animate other CSS properties.

The third part is the CSS for your logo. It is centered and set to fade in when the “zoom” class is added to the container.

/* LOGO CONTAINER AND IMAGE */
.home .pre-roll-logo-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 6s, filter 4s;
}
.pre-roll-logo-container img {
    opacity: 0;
    transition: opacity 5s;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}
.pre-roll-logo-container.zoom img {
    opacity: 1;
}

If you check out your site now, it should basically be stuck on the splash page with the background image showing and the logo in the foreground.

The JavaScript (jQuery)

To animate everything and make the splash page fade out, you’ll need this jQuery code (or you could do it in vanilla JavaScript):

<script>
	/* ANIMATE THE PRE-ROLL SPLASH PAGE AND FADE IT OUT */
	jQuery(document).ready(function() {
    	console.log("pre-roll code running");
      	jQuery(".pre-roll").addClass("zoom");
      	jQuery(".pre-roll-logo-container").addClass("zoom");
      	setTimeout(function() {
        jQuery(".pre-roll").fadeOut(1000);
        jQuery(".pre-roll-logo-container").fadeOut(1200);
      	}, 5000);
    });
</script>

I added this code in the <body>, right after the HTML that I added. In Divi, that means you can add it to the same Theme Options -> Integration -> <body> area.

With that added, the animation should run and the splash page should fade out after five seconds!

I’ve found the trickiest part of this is getting the JavaScript to work properly. Somehow, when I enqueued it in my child theme, it didn’t work. It only worked when I added it directly to my HTML right after the containers.

Since I’m using jQuery, make sure your site is loading jQuery before this code appears.

Graceful Degradation

The final piece is some code to hide the splash page if the user isn’t running JavaScript. Otherwise, the splash page will never animate away and users with JavaScript turned off will be blocked from your site!

This code goes in the <head> of your page:

<!-- DISABLE PRE-ROLL ANIMATION IS THERE IS NO JAVASCRIPT -->
<noscript>
	<style>
		.pre-roll,
		.pre-roll-logo-container {
			display: none !important;
		}
	</style>
</noscript>

If you’re using WordPress Divi theme, you can add this to Theme Options -> Integration -> <head>.

Testing

That’s it! Everything should work now. Be sure to test on desktop, mobile, and different browsers, and with JavaScript on and off. In my testing, this worked in all cases, but let me know if it doesn’t for you!

Only Show the Splash Page on First Visit?

You may not want to run this animation every time the user visits your home page. Perhaps you only want to do it on the first visit. To accomplish that, you could store a timestamp in the browser’s session storage using JavaScript, and check it every time the home page loads. For now, I leave this as an exercise to the reader, though I might add it to this article at some point.

I hope this was helpful. Please leave your questions or comments below! – Brian

Shares

Please Leave a Question or Comment

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Comment
Inline Feedbacks
View all comments
trackback

[…] had a site with a pre-roll fade-in animation on the home page. It worked great, but it soon got really tiresome to have to wait for the animation to complete […]