Create Scrollable Splash Screen by Using jQuery and CSS3

Hello Developer and Designers,

 

Splash screen, also called intro screen, is a great method for grabbing the attention of maximum users towards your website. However, creating a successful splash screen can be challenging, considering that most users find it irritating.

 

A splash screen can be termed successful if it appear quickly and can be dismissed easily. Visually appealing these screens can persuade your users to keep scrolling for more information. This makes it a great option for single page websites with scrolling, along with banner style of website designing that has been popularized by flat design.

 

Shared here is a very basic method for creating this effect that is easy to modify for making pleasing intros.

 

Markup

 

For this the markup has been kept very simple, making it easier to be implement on new projects as well as already existing sites.

 

Basically we will be making two divs, first with a splash class and second with wrapper class. If wrapper class already exists when using it on a site that already exists, then the class name can be changed.

 

Now, dummy content along with some titles need to be added for demo. Some kind of arrow will be also be required to be added in splash screen showing the user how it can be scrolled down.

 

Here is a markup for 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=”http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js”></script>
<script type=”text/javascript” src=”js/main.js”></script>

 

Here we have started with splash div, which has a scroll indicator and a title. The closing that div, another with wrapper class is opened. It has some generic website content, which can be different in every case. For keeping it simple, we have added a title, main content area, footer and some navigation. From Google API, jQuery is added in it, which is being used for functionality. Now it will be linked to .js file, in which we have written the jQuery code.

 

It can also be noticed how class name fades in splash screen area. This class can be used for adding CSS3 animations to specific elements. It might not look very impressive now, as we need CSS for styling.

 

Read Here Which is faster  CSS3 Or JQuery

 

Styling

 

Again try to keep styles useful and simple. Start with .fade-in class name.

@-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;
}

 

Here the keyframes have been declared first, while our animation is called fadeIn, going from 0 to 1 in opacity. Now directly targeting class name, specify its opacity as 0. Recently specified animation can be called ion, making it last for 0.3s and giving it 0.5s of delay.

 

Here is the CSS required for 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;
}

 

A background image is used, which is centralized ensuring that the entire screen gets covered. It should be attached, which implies that it is not move. Giving it fixed position; specify a distance of 0 from bottom, top, left and right, filling the browser window completely. Give it minimum height, as it will be placed inside perfectly positioned. It should have high z-index, as it should appear on top of the other content.

 

After this, all that is left to do is right placement of title, adding arrows facing down, indicating that you need to scroll down, along with some basic page styles.
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;}
}

 

jQuery
As mentioned earlier, we will now create a file with name main.js in js directory, which will include our jQuery which will cause the splash screen to disappear when scrolled or when the arrow link will be clicked.

$(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);
});
});

 

So, this is a very basic and simple, yet effective, solution for making an intro or splash screen for adding on your website. This screen will disappear when the user will scroll or click on any particular element. This code can be taken, used and modified to match your needs, as it can be utilized in innumerable ways.

5092 3 Views Today