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.

Answer 2

I'm going to suggest two ways to do this, but I highly recommend that you design it to work when JS is turned off.

Option one consists of actually making a splash page (a separate file)- in other words, your index.html or whatever your primary landing file contains just that markup and no javascript is required. This has drawbacks:

-All users are funneled to this page unless you do something awful like make a JS redirect, etc. -Not really that great for users that have been to the site before, since they have to click to get to the site unless you add that exact JS redirect. -Bad for SEO (boooo)

Option two consists of making your splash page actually part of the main page. This is a quick-and-dirty deployment example but something that I've implemented on big projects and it works really well. Basically, make a "splash" div and a "post-splash" div. Assign them both IDs (perhaps using those exact strings) so you can manipulate the with JS. The post-splash div should (oh god, he's gonna say it) contain an inline style of display:none. This is ON PURPOSE, so don't have an allergic reaction- it's so that even if the user is waiting for the CSS to load it will still NOT be visible.

Basically, when the user clicks the "continue" button in the "splash" section, you use JS to either outright switch the visibility of your "splash" div to none and the "postsplash" div to block, or you do the fade effect. The fade effect would require absolute positioning on the "splash" div, so that the other content could appear at the top of the window during the fade.

The benefits of this approach are various, but there are drawbacks that you'd have to get around using JS if applicable. I would build it first for non-JS machines (which is like < 1% of users in the US)- in other words, the "continue" button would be a link to refresh the page with a parameter that would load the page with the "post-splash" visible, and the "splash" display:none. That's only possible if you're running a dynamic server environment. If you aren't running PHP or ASP or something, then you could just have it act like option 1. If the user has javascript, for the onclick of that continue button you simply call the preventDefault() method so that the page doesn't refresh, and instead perform your fade to display the content.

This is a lot of information so if you need any clarification let me know, but this method works great for me on enterprise-scale projects AND it's SUPER COMPATIBLE in that it won't break your website for machines that don't support JS (meaning they are old the user has it disabled, the network has it disabled, etc). YAY FOR PROGRESSIVE ENHANCEMENT!

To be REAL nice to your users, you should also set a cookie that will go straight to the page content if they have already visited the site. Users don't really want to see splash pages more than once, in my experience.