Search Chirayu Software Solutions Blog

Friday, June 10, 2016

How to add Splash Screen in Website

You can put your splashscreen in a div on top of your website at the first visit and when the user click on it (or on the "Enter" link), fade it with:
 <div id="splashscreen">
    <h2>Welcome !</h2>
    Take a look at our new products, blablabla
    <img src="http://i.telegraph.co.uk/multimedia/archive/02182/kitten_2182000b.jpg" />

    <a href="#" class="enter_link">Enter on the website</a>
</div>
And with just 3 lines of jQuery:
 $('.enter_link').click(function() { 
        $(this).parent().fadeOut(500);
 });
The splashscreen div need to take the whole space available and have a background to hide the actual content. JSFiddle example: http://jsfiddle.net/5zP3Q/

Post a Comment