Make Site Elements FadeIn on Page While Loading

Now we can load elements of site’s layout using CSS transition effects and a small javascript code.

Just need to add this javascript in my theme .js file and some ID (#body) to the body tag:

/* add class .fadein to load elements with opacity change */
window.onload = function(){   

And then add this CSS:

.fadein {
        opacity: 0;
        transition: opacity 2s;
        -moz-transition: opacity 2s;
        -webkit-transition: opacity 2s;
        -o-transition: opacity 2s;

 #body.loaded .fadein {
        opacity: 1;

Now add class .fadein to the element you want to load with transition effect. The element will fade into layout.

This entry was posted in Templates and tagged . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *