Last updated on November 16th, 2015 at 09:37 am
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.
admin