How to add fade-out effect using pure JavaScript ?
Last Updated : 29 Dec, 2022
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 the 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:
JavaScript setInterval() Method: The setInterval() method repeats a given function at every given time interval.
Syntax:
setInterval(function_reference, time interval)
JavaScript clearInterval() Method: The clearInterval() function in javascript clears the interval which has been set by the setInterval() function before that.
Syntax:
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 the setInterval() method which takes two parameters: one is function reference(which is hidden in this case) and other is timer(in number).
In the hide function, we are taking property opacity in the variable of name opacity and reducing it by 0.1 every time the fadeout function is called.
Example 1: This example describes the above-explained approach.
html
<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>
<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>
|
Output:
Explanation:
- In the above code, the portion in which the fade-out effect is to be done is selected by id(body in this case).
- window.onload=fadeout, is used to call the fadeout() function automatically when the page goes on loading.
- In the fadeout() function, one more function of name setInterval() is also called, which calls the hide() function on every interval of 200 milliseconds till clearInterval() is called, clearInterval() will be called when the opacity of selected portion becomes zero.
- In the hide function, simple logic is written for reducing opacity by 0.1 every time the fadeout() function is called on the selected part. In this, getPropertyValue(“opacity”), is used to select the property opacity.
- These works continue 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 the function reference. This approach is comparatively easy.
Example: This example shows the above-explained approach.
html
<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>
<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>
|
Output:
Explanation: Note: Opacity lies between 0-1, in this case, the initial opacity value is set to be 1.
- In the above code, the portion in which the 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 the fadeout() function, we are defining our logic in the intervalId variable which calls the setInterval() method, here instead of giving function reference, the whole function is being defined.
- In a 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 work continues till opacity becomes 0 and the clear function is called.
We have taken 0.1 and 200 milliseconds as numerical values, any values are acceptable.
Similar Reads
How To Include a JavaScript File in Another JavaScript File?
The import and export syntax available in ES6 (ECMAScript 2015) module is used to include a JavaScript file in another JavaScript file. This approach is the most modern and recommended way to share code between JavaScript files. It allows you to break your code into smaller modules and then import t
4 min read
How to override a JavaScript function ?
In this article, we are given an HTML document and the task is to override the function, either a predefined function or a user-defined function using JavaScript. Approach: When we run the script then Fun() function is called. After clicking the button the GFG_Fun() function is called and this funct
2 min read
Using the function* Declaration in JavaScript
The function* declaration is used to define a generator that returns a Generator object. Generators are very powerful for asynchronous programming as they aim to resolve callback problems. In a generator, the yield keyword is used instead of return. The yield statement suspends the function’s execut
2 min read
What is the difference between call and apply in JavaScript ?
JavaScript call() Method: It calls the method, taking the owner object as an argument. The keyword this refers to the 'owner' of the function or the object it belongs to. We can call a method that can be used on different objects. Syntax: object.objectMethod.call( objectInstance, arguments ) JavaScr
2 min read
How to find out the caller function in JavaScript?
In this article, we see the methods to find out the caller function in Javascript. Sometimes, the developer may want to modify how a function works on the basis of its caller function. To find out the caller function name, we will use the Function object's caller property. Property: Function.caller
1 min read
How to negate a predicate function in JavaScript ?
In this article, we will see how to negate a predicate function in JavaScript. Predicate functions are the ones that check the condition and return true and false based on the argument. Our task is to get the opposite of the predicate function. We follow the following method to get the desired resul
3 min read
How to iterate over a callback n times in JavaScript?
Given a callback function, we have to iterate over a callback n times. The callback is a function that is passed as an argument. To iterate over the callback function, we have to run the callback function n time. Here we have some common approaches: Table of Content Using recursion to iterate the n
4 min read
How to call function from it name stored in a string using JavaScript ?
In this article, we will call a function from the string stored in a variable. There are two methods to call a function from a string stored in a variable. Using window object methodUsing eval() method Note: The eval() method is older and is deprecated. Method 1: Using the window object. The window
2 min read
How to measure time taken by a function to execute using JavaScript ?
This article will show how to measure the time taken by a function to execute using Javascript. To measure the time taken by a function to execute we have three methods: Table of Content Using the Using Date ObjectUsing the performance.now() methodUsing the console.time() methodMethod 1: Using the U
3 min read
How to check a function is defined in JavaScript ?
In this article, we will check whether a function is defined or not in JavaScript. The JavaScript typeof operator is used to check whether the function is defined or not. JavaScript typeof OperatorThe typeof operator is used to find the type of a JavaScript variable. This operator returns the type o
2 min read