Alt-Web Design & Publishing
jQuery Fade In Background on Page Load

Fade In screenshot
SEE LIVE DEMO

Method:

jQuery Script

<script type="text/javascript"

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">

</script>

 

How I survived a computer disaster

 

Spam Filter - Free Trial

CSS Code

body {
margin:0;
padding:0;
z-index:-2;
}

#background {
margin:0;
padding:0;
position:absolute;
z-index: -1;
display: none;
top:0;
left:0;
width: 100%;
height: 100%;
/**YOUR MAIN BACKGROUND IMAGE HERE**/
background: url(Images/BG/YOUR-IMAGE.jpg);
}

#container {
width: 770px;
margin: 2.5em auto;
padding: 12px;
}


Lunarpages.com Web Hosting

HTML & jQuery Function Code

<body>
<div id="background">

<div id="container">
<h2>Page container</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque tortor justo, feugiat a tempus vitae, consectetur at est. Morbi a leo nibh, sed pretium leo. Pellentesque vitae augue et mi porttitor pellentesque id pulvinar odio. Morbi eget nunc dolor, suscipit luctus nibh. </p>
<!--end #container --></div>

<script type="text/javascript">
$(window).ready(function() {
$('#background').fadeIn(3700); /*fadeIn rate in milliseconds. A higher number = slower fadeIn*/
});
</script>

<!--end #background --></div>

</body>

 

    bookmarks