roze katir

What’s up, I’m roze. I’m a web developer living in India. I am a fan of photography, arts, and design. You can visit my website with a click on the button above.

In just a few simple steps you can add a fading effect to the loading of a web page using only a few simple lines of javascript. This quick, effective technique makes use of a combination of css and built in functions of jQuery to create the effect.

The code is simple and very easy and quick to setup.

Firstly make sure you are linking to the latest version of jQuery, either by uploading it to your server or just linking to it on google‘s hosted libraries. So you will need to put something similar to the below in the head of your html document:

Then put this code also in the head of each page you would like to fade in:

And that’s it! There is no need to upload other heavy javascript files, this utilizes existing functions within the framework of jQuery it is literally that easy. What the code essentially does is hide the contents of the body tag, so your whole website but giving it a css property of display none. Then jQuery is used to fade in the content from not displaying at a speed defined by you. In this example the speed is ’3000′ which is 3 seconds and you can adjust according to get the look you are after, obviously as you may have gathered or already know, each second is 1000. You can also check our newly launched photo editor online free