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-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 a few 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 clearInterval() method
Using the requestAnimationFrame() function
Let us look at each of these approaches in detail.
Approach 1: Using the clearInterval() method
The clearInterval() method stops the fade-in animation by terminating the execution of a function set to increment the opacity at a specific interval using setInterval().
Syntax
clearInterval(intervalID);
Let us look at a step-by-step example to use the clearInterval() method to implement a fadein animation using pure JavaScript.
Example
Step 1 − You will need an HTML element if you want to apply the fade-in animation.
<div id="elementId">Fade in element</div>
Step 2 − Next, in the CSS, set the initial opacity of the element to 0, so that it will be invisible to start with. Let's add some more CSS as well along with this to make our element better −
#elementId {
width: 100px;
height: 100px;
background-color: gray;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: black;
opacity: 0;
}
Step 3 − In your JavaScript, you will create a variable to store the current opacity, and then use the setInterval() method to increment the opacity by a small amount every 10 milliseconds −
let element = document.getElementById("elementId");
let opacity = 0;
let fadeIn = setInterval(() => {
element.style.opacity = opacity;
opacity += 0.01;
}, 10);
Step 4 − You can then use an if statement to check whether the opacity has reached 1 (the maximum value), at which point you will want to stop the animation −
if (opacity >= 1) {
clearInterval(fadeIn);
}
Example
Step 5 − Finally, let us put everything together −
<!DOCTYPE html>
<html>
<head>
<title>Fade in Animation</title>
<style>
#elementId {
width: 100px;
height: 100px;
background-color: gray;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: black;
opacity: 0;
}
</style>
</head>
<body>
<div id="elementId">Tutorials Point</div>
<script>
let element = document.getElementById("elementId");
let opacity = 0;
let fadeIn = setInterval(() => {
if (opacity >= 1) {
clearInterval(fadeIn);
}
element.style.opacity = opacity;
opacity += 0.01;
}, 10);
</script>
</body>
</html>
In this example, we have put the HTML, CSS, and JavaScript code all in a single file called index.html. The HTML defines the element to fade in and the CSS defines the visual properties of the element, and the JavaScript code, which resides in the script tag, uses setInterval and clearInterval methods to make the element gradually increase its opacity until it reaches the maximum.
When you open this HTML file in a web browser, it should fade in the element with the grey background color, with the text "Tutorials Point" centered in the middle and with black color.
Approach 2: Using the requestAnimationFrame() function
The requestAnimationFrame() function allows the browser to call a specified function for updating the fade-in animation in JavaScript before the next repaint, enabling efficient animation performance.
Syntax
requestAnimationFrame(fade);
Let us look at a step-by-step example to use the requestAnimationFrame() method to implement a fade-in animation using pure JavaScript.
Example
Step 1 − You will need an HTML element if you want to apply the fade-in animation −
<div id="elementId">Fade in element</div>
Step 2 − Next, in the CSS, set the initial opacity of the element to 0, so that it will be invisible to start with. Let's add some more CSS as well along with this to make our element better −
#elementId {
opacity: 0;
}
Step 3 − Next, in your JavaScript, you will create a variable to store the current opacity, and then use the requestAnimationFrame() function to increment the opacity by a small amount every time it's called −
let element = document.getElementById("elementId");
let opacity = 0;
function fade() {
opacity += 0.01;
element.style.opacity = opacity;
requestAnimationFrame(fade);
}
requestAnimationFrame(fade);
Step 4 − You can then use an if statement to check whether the opacity has reached 1 (the maximum value), at which point you will want to stop the animation by breaking the recursion of the requestAnimationFrame call −
if (opacity >= 1) {
return;
}
Example
Step 5 − Finally, let’s put everything together −
<!DOCTYPE html>
<html>
<head>
<title>Fade in Animation</title>
<style>
#elementId {
width: 100px;
height: 100px;
background-color: grey;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
color: black;
opacity: 0;
}
</style>
</head>
<body>
<div id="elementId">Tutorials Pointt</div>
<script>
let element = document.getElementById("elementId");
let opacity = 0;
function fade() {
if (opacity >= 1) {
return;
}
opacity += 0.01;
element.style.opacity = opacity;
requestAnimationFrame(fade);
}
requestAnimationFrame(fade);
</script>
</body>
</html>
You will find the HTML, CSS, and JavaScript code all combined in a single file index.html. Here, the HTML identifies the element to have fade-in effect, CSS sets its visual properties, JavaScript in script tag uses requestAnimationFrame and recursion to increase the element's opacity till it reaches the maximum.
When you open this HTML file in a browser, it will show the fade-in animation of an element with a grey background, the text "Tutorials Point" in the center and in black color.
Conclusion
In this article, we have seen how to implement the fade-in effect using pure JavaScript. The fade-in effect is a way of gradually increasing the opacity of a selected portion of a webpage, making it more visible to the users. The two main approaches to implement this effect are by using the clearInterval() method and the requestAnimationFrame() function.
We have looked at each approach in detail and provided step-by-step examples of how to use them. Both approaches require the use of HTML, CSS, and JavaScript and can be customized according to the specific needs of your website. With this knowledge, you can now add a fade-in effect to your website and make it more dynamic and engaging for your users.
5K+ Views
