How to add fade-out effect using pure JavaScript ?

The fade effect is described as the gradual increase and decrease in the opacity of the selected portion. In other words, the fade effect is termed as the increase and decrease in opacity with respect to time. When this effect is applied with a gradual decrease in the opacity it is known as the fade-out effect. This is the effect that is used to fade out the selected part on page with a selected interval of time. Fade-out and Fade-in effect is wonderful to use in web projects as it emphasizes the styling of the web page.

The fadeOut effect is used to change the level of opacity for the selected elements from visible to hidden. By using this method, the faded element will not occupy any space. We are using the setInterval method and clearInterval method in this logic.

Syntax of in-built functions to be used in codes:

  • setInterval(): It takes two parameter as:
    setInterval(function_reference, time interval)
  • clearInterval(): It takes single parameter as:
    clearInterval(parameterof time to stop calling a function)

Approach 1: On page loading, we are calling a function called fadeout(), in which we are using setInterval() method which takes two parameter: one is function reference(which is hide in this case) and other is timer(in number).
In hide function, we are taking property opacity in variable of name opacity and reducing it by 0.1 every time the fadeout function is called.

Example 1:



filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
    <title>How to create fade-out effect 
            on page load using javascript</title>
    <script type="text/javascript">
      
    var opacity=0;
    var intervalID=0;
    window.onload=fadeout;
        function fadeout(){
               setInterval(hide, 200);
        }
    function hide(){
          var body=document.getElementById("body");
          opacity =
 Number(window.getComputedStyle(body).getPropertyValue("opacity"))
  
            if(opacity>0){
                   opacity=opacity-0.1;
                           body.style.opacity=opacity
            }
            else{
                clearInterval(intervalID); 
            }
        
    </script
      
      
      
</head>
  
<body id="body">
  
<br>
  
    <h1 style="color: green"
        GeeksForGeeks 
    </h1
  
    <b
        How to create fade-out effect 
        on page load using javascript 
    </b>
  
  
    <p
        This page will fade-out 
        after loading 
    </p
</body>
</html>    

chevron_right


Output:

Explanation:

    Note: Opacity lies between 0-1, in this case initial opacity value is taken 1.

  • In above code, the portion in which fade-out effect is to be done is selected by id(body in this case).
  • window.onload=fadeout, is used to call fadeout() function automatically when the page goes on loading.
  • In fadeout() function, one more function of name setInterval() is also calling, which calls hide() function on every interval of 200 milliseconds till clearInterval() is called, clearInterval() will be called when opacity of selected portion becomes zero.
  • In hide function, simple logic is written for reducing opacity by 0.1 every time the fadeout() function is called on selected part.In this, getPropertyValue(“opacity”), is used to select the property opacity.
  • These works continues till opacity becomes 0.

Approach-2: In this approach, complete logic is written inside a variable which is done with the help of setInterval() method, here complete function is to be written in place of function reference. This approach is comparatively easy.

Example 2:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
<head>
    <title>How to create fade-out effect 
            on page load using javascript</title>
  <script type="text/javascript">
  
         window.onload=fadeout;
           
         function fadeout() {
    var fade= document.getElementById("body");
      
    var intervalID = setInterval(function () {
          
        if (!fade.style.opacity) {
            fade.style.opacity = 1;
        }
          
          
        if (fade.style.opacity > 0) {
            fade.style.opacity -= 0.1;
        
          
        else {
            clearInterval(intervalID);
        }
          
    }, 200);
}
       
       
     </script
    </head>
<body id="body">
<br>
   
    <h1 style="color: green"
        GeeksForGeeks 
    </h1
  
    <b
        How to create fade-out effect 
        on page load using javascript 
    </b>
  
  
    <p
        This page will fade-out after loading 
    </p
</body>
</html>

chevron_right


Output:

Explanation:

Note: Opacity lies between 0-1, in this case, initial opacity value is set to be 1.

  • In above code, the portion in which fade out effect is to be done is selected by id(body in this case).
  • window.onload=fadeout, is used to call fadeout() function automatically when page goes on loading.
  • In fadeout() function, we are defining our logic in intervalId variable which calls setInterval() method, here instead of giving function reference, whole function is being defined.
  • In defined function, every time we are comparing style.opacity with 0, and if it is greater than 0, an operation is to be performed to decrease the opacity by 0.1 value and when this value becomes 0, the clear function will be called automatically.
  • This works continues till opacity becomes 0 and clear function is called.

We have taken 0.1 and 200 milliseconds as numerical values, any values are acceptable.

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.