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.