Welcome screen before website loads (Click to enter) [Splash Screen]
I am using flexbox and session storage to hide and show the splash screen.
The best part is in is in pure CSS and Javascript. You can use Jquery to animate stuff. I am setting a variable SplashShown in session storage to avoid displaying splash on page reload however if user open it in new browser window then splash will appear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<title>Track My Bus|Splash</title>
<meta name="author" content="Hitesh Sahu" />
<style>
/*
Force full width & height.
If this block is removed, the layout height/length will be determined by
the amount of content in the page. That might result in a page which has
a footer only a few inches from the top of the viewport, or one which
scrolls beyond the viewport.
This forces the layout to always be full screen regardless of how much,
or how little, content is in place. Neither is "right" or "wrong", there
are valid cases for each. I just want to be clear what's controlling the
page/viewport height.
*/
html, body, .viewport {
width: 100%;
height: 100%;
margin: 0;
}
.flex-container {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-moz-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-moz-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
#flex-item {
text-align: center;
margin: auto;
}
</style>
</head>
<body >
<!--Your Main contents-->
<div id ="main" class="flex-container"
style ="background: #673AB7;">
<h2 style ="color: white;">Your Awesome contents<h2>
</object>
</div>
<!--Your Splash Screen-->
<div id="splash" class="flex-container"
style ="background: #E91E63 ; display: none" >
<!--Center align Splash contents in all screen sizes-->
<div id="flex-item" >
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGvaIWed26uYYryjCfO2qWpAFGrDyoWUlvCuPx-sEMAguMHcKQvw"
alt="app_icon"
style="width:150px ; height :150px"
/>
<h2 style ="color: white;">My Awesome App<h2>
</div>
</div>
<!-- Scripts-->
<script type="text/javascript">
function fade(element) {
var op = 1; // initial opacity
var timer = setInterval(function () {
if (op <= 0.1){
clearInterval(timer);
element.style.display = 'none';
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op -= op * 0.1;
}, 50);
}
setTimeout(function(){
if(typeof(Storage) !== "undefined") {
console.log("Already shown" +sessionStorage.getItem('spalashShown'));
if( !sessionStorage.getItem('spalashShown') || sessionStorage.getItem('spalashShown') === null ) {
document.getElementById('splash') .style.display = 'inline';
//Display splash
setTimeout(function(){
fade(document.getElementById('splash'));
// document.getElementById('splash') .style.display = 'none'
// window.location = "http://hiteshsahu.com";
sessionStorage.setItem('spalashShown', true );
}
, 3000);
} else {
//Display Main Content
document.getElementById('splash') .style.display = 'none'
console.log("Already shown");
}
}
else {
document.getElementById("result").innerHTML = "Sorry, your browser does not support web storage...";
}
}, 0);
</script>
</body>
</html>
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.
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.