Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to add fade-in effect using pure JavaScript?
Introduction
We use the fade effect to bring attention to certain parts of our website by gradually increasing or decreasing their opacity. This gradual change in opacity is called the fade-in or fade-out effect. When we gradually increase the opacity, it's known as the fade-in effect and is used to make the selected part of the page become more visible over a chosen amount of time. This creates a smooth transition and helps make our website more dynamic and engaging for our users.
In this article, we will be exploring two ways in which we can implement the fade-in effect using HTML, CSS, and pure JavaScript.
Approaches
The two main approaches through which we can implement the fade-in effect using pure JavaScript are:
Using the setInterval() and clearInterval() methods
Using the requestAnimationFrame() function
Let us look at each of these approaches in detail.
Method 1: Using setInterval() and clearInterval()
The setInterval() method repeatedly executes a function at specified time intervals, allowing us to gradually increase opacity. The clearInterval() method stops this animation when the desired opacity is reached.
Syntax
setInterval(function, delay); clearInterval(intervalID);
Example
<!DOCTYPE html>
<html>
<head>
<title>Fade in Animation - setInterval</title>
<style>
#fadeElement {
width: 200px;
height: 100px;
background-color: #4CAF50;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
opacity: 0;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="fadeElement">Fading In...</div>
<script>
let element = document.getElementById("fadeElement");
let opacity = 0;
let fadeIn = setInterval(() => {
if (opacity >= 1) {
clearInterval(fadeIn);
return;
}
opacity += 0.02;
element.style.opacity = opacity;
}, 20);
</script>
</body>
</html>
The green box will gradually fade in from transparent to fully visible over 1 second.
Method 2: Using requestAnimationFrame()
The requestAnimationFrame() function provides a more performance-optimized approach by synchronizing the animation with the browser's refresh rate, typically 60fps.
Syntax
requestAnimationFrame(callback);
Example
<!DOCTYPE html>
<html>
<head>
<title>Fade in Animation - requestAnimationFrame</title>
<style>
#animatedElement {
width: 200px;
height: 100px;
background-color: #2196F3;
margin: 50px auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: white;
opacity: 0;
border-radius: 8px;
}
</style>
</head>
<body>
<div id="animatedElement">Smooth Fade In</div>
<script>
let element = document.getElementById("animatedElement");
let opacity = 0;
let startTime = null;
function fadeIn(timestamp) {
if (!startTime) startTime = timestamp;
let elapsed = timestamp - startTime;
opacity = Math.min(elapsed / 1000, 1); // 1 second duration
element.style.opacity = opacity;
if (opacity < 1) {
requestAnimationFrame(fadeIn);
}
}
requestAnimationFrame(fadeIn);
</script>
</body>
</html>
The blue box will smoothly fade in using browser-optimized animation timing.
Reusable Fade-In Function
Here's a reusable function that can fade in any element:
<!DOCTYPE html>
<html>
<head>
<title>Reusable Fade Function</title>
<style>
.fade-box {
width: 150px;
height: 80px;
margin: 20px;
display: inline-block;
text-align: center;
line-height: 80px;
color: white;
opacity: 0;
border-radius: 5px;
}
#box1 { background-color: #FF5722; }
#box2 { background-color: #9C27B0; }
#box3 { background-color: #FF9800; }
</style>
</head>
<body>
<div id="box1" class="fade-box">Box 1</div>
<div id="box2" class="fade-box">Box 2</div>
<div id="box3" class="fade-box">Box 3</div>
<script>
function fadeIn(element, duration = 1000) {
let startTime = null;
function animate(timestamp) {
if (!startTime) startTime = timestamp;
let progress = Math.min((timestamp - startTime) / duration, 1);
element.style.opacity = progress;
if (progress < 1) {
requestAnimationFrame(animate);
}
}
requestAnimationFrame(animate);
}
// Fade in elements with different delays
setTimeout(() => fadeIn(document.getElementById('box1')), 500);
setTimeout(() => fadeIn(document.getElementById('box2')), 1000);
setTimeout(() => fadeIn(document.getElementById('box3')), 1500);
</script>
</body>
</html>
Three colored boxes will fade in sequentially with 500ms delays between each.
Comparison
| Method | Performance | Browser Optimization | Precision |
|---|---|---|---|
| setInterval() | Good | No | Time-based |
| requestAnimationFrame() | Excellent | Yes | Frame-based |
Conclusion
Both setInterval() and requestAnimationFrame() can create smooth fade-in effects. Use requestAnimationFrame() for better performance and smoother animations, especially when creating multiple or complex animations on the same page.
7K+ Views
