Fade in your Website using jquery

Posted Tuesday 16th Oct 2012 by Claire Jennings 3 Comments

Step 1

Firstly create a Div ID wrapping the full page:

<body>
<div id="page-wrap">
Content goes here
</div><!-- page-wrap -->
</body>

Step 2

Inside the Head Tag, you will need to import the Jquery library, as well as creating a fade-in effect on the #page-wrap div tag. Placing your effect within the $(document).ready() function, means that the effect only begins when your document has loaded.

<script type="text/javascript" src="/jquery.min.js"></script>
 
<script type="text/javascript">
$(document).ready(function() 
{
		// fade in content.
		$( '#page-wrap' ).fadeIn("slow");		
});
</script>

Step 3

To allow your content to fade in, you need to ensure it does not display to begin with. You will need to add a display:none; to your container div.

<style type="text/css">
 
#page-wrap
{
	display:none;	
}
 
</style>

Step 4:

Your page should now fade in on all Javascript enabled browsers. However, to ensure it also works on browsers with Javascript turned off, you will need write the div tag using Javascript and not hardcoding it. This means that browsers that have Javascript turned off, will therefore not load the containing div, which means the CSS ‘display:none;’ will not be applied to it.

<body>
 
<script type="text/javascript">
<!--//--><![CDATA[//><!--
document.write( '<div id="page-wrap">' );
//--><!]]>
</script>
 
Content goes here!
 
<script type="text/javascript">
<!--//--><![CDATA[//><!--
document.write( '</div><!-- page-wrap -->' );
//--><!]]>
</script>
 
</body>
 

By Claire Jennings

Claire loves to design pretty website's all day long, she especially likes creating Magento and Wordpress based websites, and finding out new nifty tricks along the way. In her spare time likes to make Truffles, Think up new ideas whilst brushing her teeth, and change her hair colour. (On that note what colour shall i do next?)

See all of posts.

  • Anony

    Hi. Great post. If display is set to none and only available when the JavaScript is run. Isn’t this bad for seo? I thought that google bot does not read js? Please correct me if I am wrong thanks

  • http://twitter.com/gavjayhoffman Gav Hoffman

    Hi Anony, if that’s the case then a simple noscript tag will work. Use this to detect if javascript is disabled, if it is, display some different css and tell your #page to not display: none. Example:

  • Claire

    Hi Anony, If you read my next post then you can use CSS transparency instead, and use CSS3 pie to ensure this works on the IE browsers as well. See below post:
    http://www.creare-webdesign.co.uk/blog/misc/fade-parts-of-your-html-page-as-you-scroll.html