I have often made a the entire page content fade in when loading a page. It seems to give a nice effect. I use jQuery to do this. In the example below I have coloured the page red for highlighting purposes.
See demo.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Body Fade In</title>
<style type="text/css">
body
{
font-family:Sans-serif;
color:#FF0000;
}
</style>
<script src="http://www.google.com/jsapi"></script>
<script>
google.load("jquery", "1");
google.load("jqueryui", "1");
</script>
<script>
$(document).ready(function()
{
$('body').hide().fadeIn(2000);
});
</script>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
Hi Mick,
ReplyDeleteThanks you so much...web page fadein jquery effects worked. It look good.
Again thanks...
Hi Mick,
ReplyDeleteThanks for sharing this tip. Can you tell me if your above code creates the same fade-in effect that you see on this page? I really like how that looks.
http://www.lef.org/ui/supersale2012/index.htm
I'm pretty new to all this. Can you tell me where to paste the code and if it needs any modifying? I use WordPress.org.
Thank you!
Bruce
damn thanks a lot for such a simple script !!!
ReplyDeleteThankyou very much..this is what i really searching for.. thanks
ReplyDeleteit doesn't work in IE... any solution? thank v.m.
ReplyDeleteThanks Mick! This was just what I was looking for and everything else seemed to fail. I assigned different divs that were overlayed .pngs and added them to the functions list with different timings and... awesome onload. Simplicity that works! Thanks again!
ReplyDelete