Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to add fade-out effect using pure JavaScript?
We can add a fade-out effect using pure JavaScript by manipulating the element's style property. We can start by setting the element's opacity to 1 and then gradually decreasing it over time using the setInterval or setTimeout function. Finally, we can remove the element from the DOM once the opacity reaches 0.
Fade-out Effect
A fade-out effect is a visual transition where an element gradually becomes less visible over a period of time. This effect is commonly used in web design and animation to create a smooth transition between elements on a page or to hide an element from view.
Therefore, let us discuss the approach we will be using today.
Approach
Create a function for the fade-out effect. Inside the function, create a variable to store the element you want to apply the effect to −
function fadeOut(element) {
var el = document.getElementById(element);
}
Add a setInterval function to the fade-out function. This will allow the effect to run continuously until the element is no longer visible.
function fadeOut(element) {
var el = document.getElementById(element);
setInterval(function() {
// code for the fade-out effect
}, 50);
}
Inside the setInterval function, create a variable to store the current opacity of the element. Then, use an if statement to check if the opacity is greater than 0. If it is, decrement the opacity by 0.1 and apply the new value to the element's style.opacity property −
function fadeOut(element) {
var el = document.getElementById(element);
setInterval(function() {
var opacity = el.style.opacity;
if (opacity > 0) {
opacity -= 0.1;
el.style.opacity = opacity;
}
}, 50);
}
Finally, call the fadeOut function and pass in the ID of the element you want to apply the effect to −
fadeOut("myElement");
Note − This is a basic example of how to create a fade-out effect using pure JavaScript. You can adjust the opacity, decrement value, interval time, and add additional logic to make the effect more dynamic.
Example
Therefore, let’s now look at the complete working code and how it works.
<!DOCTYPE html>
<html>
<head>
<title>Fade Out</title>
</head>
<body>
<div style="color:black;" class="fade-out-element">
This is the element that will fade out
</div>
<script>
var element = document.querySelector('.fade-out-element');
function fadeOut(el) {
var opacity = 1; // Initial opacity
var interval = setInterval(function() {
if (opacity > 0) {
opacity -= 0.1;
el.style.opacity = opacity;
} else {
clearInterval(interval); // Stop the interval when opacity reaches 0
el.style.display = 'none'; // Hide the element
}
}, 50);
}
fadeOut(element);
</script>
</body>
</html>
6K+ Views
