Log in

View Full Version : 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 (http://www.onextrapixel.com/2010/02/23/how-to-use-jquery-to-make-slick-page-transitions/)?
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
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:


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

Initial styles:


#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:


<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.