Fade-in a Page or Element on Page Load

Fade in the contents of the page when it loads. This technique can be applied to a whole page or to a specific element within the page.

CSS

html {
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 8 & 9 */
	filter: alpha(opacity=0); /* newer IE */
	-moz-opacity: 0; /* Older than Firefox 0.9 */
	-khtml-opacity: 0; /* Safari 1.x (pre WebKit) */
	opacity:0; /* (modern browsers) initially sets nothing displayed on page */
	-webkit-transition: opacity 2s;
	-moz-transition: opacity 2s;
	-o-transition: opacity 2s;
	-ms-transition: opacity 2s;
	transition: opacity 2s;
}

Javascript

Turn Opacity on immediately after page has loaded. Place the this Javascript line at the bottom of the page, before the closing body tag (or place it in the head).

window.onload = function() { document.documentElement.style.opacity = '1'; }

Example

Just refresh the page to demonstrate the effect. This technique can be applied to an element within the page by simply changing the affected html element in the css and javascript.

Copyright © Lage.us Website Development | Disclaimer | Privacy Policy | Terms of Use