How to create a scrollable splash screen with CSS3 and jQuery

A great way to catch the attention of a visitor to your website is a “splash screen” or an “intro screen”. However, making a successful one is very difficult for one simple reason: splash screens easily irritate users.

Splash screens can work if they appear quickly and are easily dismissible. They can be visually striking, and beautiful, and make the user want to scroll to learn more. This style of intros work very well on single-page scrolling websites. Or the ‘banner style’ of webdesign that has come into fashion with the flat design trend. It can also be very useful to make a nice looking “background video” style of intro which are also all-the-rage at the moment.

What I want to show you today is a basic method to achieve this effect, which you can modify easily to make nice-looking intros to web experiences.

If you’d like to see what we’re building, there’s a demo here. And you can download all the source files here.

The markup

We’re going to try and keep the markup for this very simple. That way it can actually be implemented on pre-existing sites as well as new projects.

So basically what we want to make is two divs. One with a class of splash and another with a class of wrapper. (The wrapper class might already exist in some way for you if you’re implementing this on a pre-existing site, so you may need to vary that class name).

That’s it. That’s all we need semantically. But obviously we’ll add in some dummy content and titles so that we have something to look at in our demo. We’ll also need some sort of arrow to add in the splash screen to show the user that he can scroll down (as this will be our method for making the intro screen disappear and bring in the main content).

So here’s the simple markup all going inside our body tag:

<div class="splash fade-in">
 <h1 class="splash-title fade-in">SPLASH SCREEN TITLE</h1>
 <a href="#" class="splash-arrow fade-in"><img src="img/down-arrow.png" alt="" /></a>
</div> <!-- END .splash -->
<div class="wrapper">
 <header class="cf">
 <h1><a href="#">Page Title</a></h1>
 <nav>
 <ul>
 <li><a href="#" class="active">Home</a></li>
 <li><a href="#">About</a></li>
 <li><a href="#">Work</a></li>
 <li><a href="#">Contact</a></li>
 </ul>
 </nav>
 </header>
 <section id="main-content">
 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, velit sapiente facere tempora ullam accusamus minus laborum porro odit sequi dolorum enim optio alias at nulla laudantium voluptatibus quibusdam quaerat provident eius quo perferendis voluptatem modi maiores cumque saepe quidem ducimus numquam et commodi cupiditate libero pariatur mollitia eveniet molestias debitis quia! Natus, minima, error, porro facere cum perferendis consequatur necessitatibus id sapiente soluta veritatis magnam quasi ut cumque provident quidem nemo enim nesciunt nihil architecto in obcaecati nobis quam tenetur corrupti. Error, soluta autem consequatur mollitia dolorem sequi iusto dolore fuga facilis esse illum accusamus ratione earum quasi ipsa doloribus odio. Architecto, natus fuga non perferendis veritatis nihil repellat dolorum rerum quidem</p>
 <br />
 <hr />
 </section>
 <footer>
 <p>&copy; 2013 - Splash Screen</p>
 </footer>
</div> <!-- END .wrapper -->

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

So let’s explain what’s going on here in a little more detail: we start with our splash div. Inside of that we have a title, and our scroll indicator (which here is an arrow image, but can be anything you want it to be obviously). Then we close that div, and open another with a class of wrapper. Inside that we’ve just got some generic site content which will be different for every case, but here we’ll keep it simple: a title, some navigation, a main content area and a footer. Then jQuery is included from the Google API as we will be using it for functionality, and finally we link to another .js file which is our own in which we’ll be writing our jQuery code.

You might also notice the class name fade-in in the splash screen area. We’ll use that class to add some nice CSS3 animations to certain elements and make the intro more powerful. Obviously if you look at the results now it won’t really be anything, we need to style everything now. Speaking of which let’s get onto the CSS…

Styling

Again let’s try and keep the styles simple and useful. This is all plain CSS. First of all, let’s start off with the .fade-in class name. (This has to be declared at the top of our CSS file, so that we can declare different animation delay times on other elements further below.)

@-webkit-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

.fade-in {
 opacity:0;
 -webkit-animation:fadeIn ease-in 1; 
 -moz-animation:fadeIn ease-in 1;
 animation:fadeIn ease-in 1;

 -webkit-animation-fill-mode:forwards; 
 -moz-animation-fill-mode:forwards;
 animation-fill-mode:forwards;

 -webkit-animation-duration:0.3s;
 -moz-animation-duration:0.3s;
 animation-duration:0.3s;

 -webkit-animation-delay: 0.5s;
 -moz-animation-delay: 0.5s;
 animation-delay: 0.5s;
}

We’re declaring the keyframes first and calling our animation fadeIn. It goes from a 0 opacity to 1. Then we target the class name directly, specify that it has 0 opacity. and call ion the animation that we just specified, make it last 0.3s and give it a delay of 0.5s.

Now let’s look at the CSS needed for our splash page:

.splash {
  background: url('../img/splash-bg.jpg') center center;
 background-size: cover;
 background-attachment: fixed;
 position: fixed;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 min-height: 360px;
 z-index: 999;
 text-align: center;
 }

We’re calling in a background image (here it’s just a black and white photo of a street), which we’re centering, also making sure it covers the whole screen at whatever size, and making it attached—which means that it’ll not move on scroll. Then we give it a ‘fixed’ position, and specify that it should be at a distance of 0 from the top, right, bottom and left—therefore it fills the entire browser window. We’ll then give it a minimum height as what we’ll be placing inside will be absolutely positioned. Make sure it has a high z-index as we want it to appear above the rest of the content on the page (which will now be placed directly underneath our splash screen, as it has a fixed position).

There you go, that’s all the styles that are actually needed to make the splash screen appear in the right place on the page. Filling the screen and above all other content, without changing the flow of the page at all. So now I’ll quickly give you the rest of the CSS, which mainly places the title in the right place, add’s a nice down facing arrow to indicate that the user should scroll. And finally some basic styles for the page, and a few media queries:

html, body {
 width: 100%;
 height: 100%;
}

body { font: normal 1em/1.5em 'Open Sans', sans-serif; color: #333; margin-bottom: 20px; }
 .wrapper {
 max-width: 1000px;
 width: 90%;
 margin: 0 auto; 
}

.splash-title {
 color: white;
 font-size: 3em;
 margin-top: 100px;
 text-shadow: 0 2px 10px #000;
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 animation-delay: 1s;
}

a.splash-arrow {
 color: white;
 font-size: 1.2em;
 position: absolute;
 bottom: 55px;
 left: 50%;
 margin-left: -25px;
 padding: 10px;
 width: 50px;
 height: 50px;
 font-weight: bold;
 -webkit-transition: all 0.1s ease;
 -moz-transition: all 0.1s ease;
 -o-transition: all 0.1s ease;
 transition: all 0.1s ease;
 -webkit-animation-delay: 1.5s;
 -moz-animation-delay: 1.5s;
 animation-delay: 1.5s;
 border: 3px solid white;
 -webkit-border-radius: 50%;
 -moz-border-radius: 50%;
 border-radius: 50%;
}

a.splash-arrow:hover {
 text-decoration: none;
 bottom: 50px;
}

@media all and (max-width: 690px) {
 header h1 { width: 100%; text-align: center; }
 header nav { float: none; display: inline-block; margin: 0 auto; }
 .splash-title {font-size: 2em;}
}

@media all and (max-width: 480px) {
 .splash-title {font-size: 1.5em;}
}

So here we have general body styles, some top padding on the title, where we also delay the fade in animation by another half a second. So it has its own entrance. The arrow link is absolutely positioned, to always be at the middle and the bottom of the screen. It has another half a second delay to appear final to the screen. We are adding some CSS3 transitions so that the position changes on the :hover state are animated. Finally we have some tiny media query changes to make it look slightly nicer on smaller screens. But obviously these styles will change according to your design.

jQuery

So as we declared earlier we’re going to make a file named main.js in a js directory. Inside that we’ll write our jQuery that makes the splash screen disappear on scroll, or when you click the arrow link. Here it is:

$(document).ready(function() {
 if($(".splash").is(":visible")) {
 $(".wrapper").css({"opacity":"0"});
 }

 $(".splash-arrow").click(function() {
 $(".splash").slideUp("800", function() {
 $(".wrapper").delay(100).animate({"opacity":"1.0"},800);
 });
 });
});

$(window).scroll(function() {
 $(window).off("scroll");
 $(".splash").slideUp("800", function() {
 $("html, body").animate({"scrollTop":"0px"},100);
 $(".wrapper").delay(100).animate({"opacity":"1.0"},800);
 });
});

First of all we are wrapping our first few statements inside a document ready function, to take action only when the page has fully loaded. So to begin we check to see if our splash screen is visible. If it is, we make the wrapper invisible (so we have no flash of content while the background image loads, and also to make a final fade in animation once we arrive at the page). We then add a function to the click handler on the arrow. So if the user clicks on it, the splash screen slides up (and therefore disappears) and then we animate the opacity of the wrapper back to 1.

This little block of code is (nearly) the same that we’ll be using just after in the $(window).scroll function. So when the user scrolls, we slide up the splash, and then this time animate back to top of the page (so the user doesn’t start half way down the page) and animate the opacity of the wrapper element. We also add in that line $(window).off(“scroll”); that stops the window from actually scrolling when we don’t want it to. When the user first scrolls we want it to just set off the animation, and not actually scroll the page. But once the intro is gone the page will scroll normally.

Conclusion

So there you have it, a very simple (lightweight) but elegant solution to have an intro screen added to the top of your site, and have it disappear on scroll, or when the user clicks on a specific element. Feel free to take this code, use it and modify it to suit your needs.

As I mentioned at the beginning, this technique can be used in any number of different ways, so get creative!

Harry Atkins

Harry Atkins is a front-end designer & developer originally from the south of England and now living in Paris, France. Passionate about all types of design, he loves to code and learn about new things online. He also is a massive lover of music, art and films. Follow him on Twitter @harryjatkins and go look at his website: http://harryatkins.me