javascript - Welcome screen before website loads (Click to enter) [Splash Screen]

Question

How would I create a welcome screen on my website? For example, I have an image and a link that says "ENTER" when the user clicks enter the website appears. How would I do that? Also if possible with Javascript or JQuery, When the user clicks "ENTER", Would it be possible to crossfade from the splash screen to the website?

I don't have any code as of yet.

Answer 1

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/

Be aware that the splashscreen should be display on the first visit only. For that, use sessions and cookies on server side to decide if you need to display this portion of code or not.