Fullpage overlay effect when entering a page?

**pookeyblow** · 02-21-2013, 02:55 PM

Hi,

Does anyone know how I can create a full page overlay effect with the text "welcome!" when a person is entering my page?

This page have the exact effect I'm after (just click on the menu): http://www.hyperkit.co.uk

Would anyone be kind enough to tell how they did this?

I want it to appear when a person is entering my site and I want it to stay for a sec and then fade out (if possible).

Any help is highly appreciated!

-Pookey

**molendijk** · 02-22-2013, 12:26 AM

Somethig like this?

**pookeyblow** · 02-22-2013, 01:59 AM

That is the fading part, but not the overlay effect, right? My number 1 priority is the overlay effect with typography on top. Thanks a lot for the link though!

**charlesbecon** · 05-31-2014, 06:08 AM

Check this code..A full screen overlay using CSS code only....

http://www.corelangs.com/css/box/fulloverlay.html

charles

**jscheuer1** · 05-31-2014, 02:37 PM

Originally Posted by pookeyblow

This page have the exact effect I'm after (just click on the menu): http://www.hyperkit.co.uk

Would anyone be kind enough to tell how they did this?

Usually we do not reverse engineer or otherwise reveal other's code. But this is so basic as to reasonably be considered ordinary HTML, CSS, and jQuery javascript.

The html:

HTML Code:

<body>
<div id="overlay-preload"><span>Welcome</span></div>

Initial styles:

Code:

#overlay-preload {
	background: #f44805;
	background: rgba(244,72,5,0.6);
	height: 100%;
	width: 100%;
	position: fixed;
	z-index: 999999;
	color: #ffffff;
	font-size: 72px;
	text-align: center;
}

#overlay-preload span {
	position: relative;
	display: block;
	top: 50%;
	margin-top: -70px;
}

Uses jQuery 1.8.3, so the scripting required is:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
// Overlay fade out on load
$(window).load(function(i) {
	$('#overlay-preload').delay(5000).fadeOut('slow');
});
</script>

This is an old thread, so I'm closing it. If anyone has further questions, please start a new thread. You may refer back to this one if you like.