Last updated on November 6th, 2024 at 12:39 pm
By utilizing jQuery, it is possible to develop a straightforward splash screen for your website. Upon the loading of a web page, this script will automatically generate a splash screen, which primarily consists of an image. The core component of this script is jQuery, accompanied by a setTimeout function
$(function(){
setTimeout(function() {
$('#splash').fadeOut(500);
}, 2000);
});
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.
#splash{
position:absolute;
top:0;
left:0;
bottom:0;
width:100%;
background-color:white;
}
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="https://code.jquery.com/jquery-3.7.1.min.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.