Set fade in and fade out when load the page or refresh the page using CSS and Javascript
Posted By : Rahul Sarkar | 22-May-2016
When loading a page or refreshing the page if you want to does not show the browse the content one by one then you can use fade in and fade out function to show the all content of the page at a time.
Call the fade in function when load the page, add a class with body using JavaScript that have some properties of CSS to set fade in and then call fade out function to remove the class that we are added recently with body.
Use CSS code:
body{
opacity: 1;
transition: 1s opacity;
}
body .fade-in{
opacity: 0;
transition: none;
}
Use Javascript:
function setFadeIn(){
document.body.className = 'body fade-in'
setTimeout(setFadeOut, 500);
}
function setFadeOut(){
document.body.className = 'body';
}
Call the javaScript function with body tag using onload() event. For example <body onload="setFadeIn()">.
So in this example, when load the page, it call the setFadeIn() function, in this function we add a class "fade-in" that have some CSS properties, then with help of setTimeout function call the function setFadeOut() after 5 seconds to remove the "fade-in" class from body.
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Rahul Sarkar
Rahul is an intellectual web app developer, he has good knowledge of C, Java, Java Script, Jquery. Apart from this he likes to travel and explore new places.