Jesse Florig

I’ve been working on a new layout for Gnarbro and I wanted to change how the splash screen worked. The code below will show how to add a splash screen that allows your content to load in the background while the user receives the initial message on your splash screen. Once the user clicks the splash content, the splash screen magically slides off the screen revealing your site content. Additionally, the code degrades well by showing the user a browser/javaScript warning. If the user has javaScript enabled, the warning is hidden.

HTML:

<!--content wrapper contains your site content-->
<div id="content">
	<p>OMG The content!</p>
</div><!--#content-->
<!--blocker wrapper contains your slash screen content-->
<div id="blocker">
	<div id="splash">
		<p>Teh splash.</p>
	</div><!--#splash-->
	<!--warning will appear if user&#039;s browser is legacy and/or javaScript is disabled-->
	<p id="warning">Please update to a modern browser and/or allow javaScript.</p>
</div><!--#blocker-->

CSS:

*{
	margin:0;
	padding:0;
}
body{
	background-color:#333;
}
#blocker{
	position:absolute;
	top:0;
	left:0;
	height: 100%;
	width: 100%;
	background-color:#000;
}
#splash{
	margin:auto;
	height: 400px;
	width: 960px;
	background-color:#f00;
	cursor:pointer;
}
#content{
	margin:auto;
	height: 600px;
	width: 960px;
	background-color:#0f0;
}
#warning{
	color:#fff;
	text-align:center;
}

JS (jQuery):

$(document).ready(function() {
	//hide the content and degrade warning
	$('#content,#warning').hide();

	//set up splash click event
	$('#splash').click(function() {
		//create animation variables
		var theTop = 'top';
		var bHeight = -1 * $('#blocker').height();
		var anim = {};
		//set animation object
		anim[theTop] = bHeight;
		//animate the splash screen
		$('#blocker').animate(anim,1000,function(){
			$(this).hide()
		});
		//show the content as the splash moves off the screen
		$('#content').show();
	});
});

View the demo: jQuery Splash Screen Demo

You can add whatever you want to the <div>s or replace them with any other type of element, just be sure to maintain the element ids.

Keep in mind this is a very basic splash screen. To actually use this you’d want to avoid a postback by updating your content via AJAX or implementing a cookie to prevent the splash screen from showing on every page load.