thank you1

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.

DEMO