Jquery Splash Screen

Last updated on November 16th, 2015 at 09:37 am

Click to rate this tutorial!
[Total: 3 Average: 4.3]

Using jquery we can create a simple splash screen for your website. When a web page loads this script will automatically create a splash screen which is basically an image.

The major part of this script is jquery with a settimeout function.

$(function(){
   setTimeout(function() {
      $('#splash').fadeOut(500);
   }, 2000);
});
</script>

In this value 2000 means image will be displayed for 2 seconds and then the function to fadeOut will be triggered. I am using value 500 for the fadeout. You can customize it accordingly.

Next step is to add some CSS style for the webpage.

<style type="text/css">
#splash{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    background-color:white;
}
</style>
</style>

In the HTML part all we are doing is define a div container with id splash. You can always put an image of your choice.

<div id="splash"><center><img src="someImage.jpg" /></center></div>

The entire code will be

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Splash and Dissolve</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
body {
    background-color:red;
}

#splash {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:100%;
    background-color:white;
}
</style>



<script type="text/javascript">  
$(function(){
   setTimeout(function() {
      $('#splash').fadeOut(500);
   }, 2000);
});
</script>

</head>
<body>
<div id="splash"><center><img src="someImage.jpg" /></center></div>
</body>
</html>

Basically the image will just splash for 2 seconds and then dissolve automatically.

DEMO

Click to rate this tutorial!
[Total: 3 Average: 4.3]

Leave a Reply

Your email address will not be published.