“fadeIn” in JavaScript refers to gradually making an element visible by smoothly increasing its opacity from transparent to opaque. Though not a built-in function, you can achieve this effect by adjusting an element’s CSS properties over time using JavaScript.
The article explains how to create a fadeIn effect step by step, including setting up the HTML structure, styling the element, and adding JavaScript logic.
It also introduces a fadeOut effect and provides an easy-to-follow guide for implementing both transitions, allowing you to enhance your website with subtle and engaging animations.
What is fadeIn in JavaScript?
In JavaScript, there isn’t a ready-made tool called “fadeIn” that makes things appear slowly. But developers often use the idea of “fadeIn” when they want something on a website to gradually show up.
It’s like when you slowly turn up the brightness of a light. Imagine you have a picture on a webpage, and you want it to appear smoothly instead of just popping up suddenly.
You can use JavaScript to make it slowly become more visible, like how a fog fades away to reveal something.
This is done by slowly changing the see-through level of the picture, so it goes from being almost invisible to fully clear. That’s the “fadeIn” effect in a nutshell!
How to make pure Javascript fadein?
Here’s a step-by-step breakdown of the provided example program that demonstrates how to create a fadeIn effect in JavaScript:
Step 1: HTML Document Structure
Start by setting up the basic structure of an HTML document. This includes declaring the document type, specifying the language, and setting the viewport for responsive design. Also, give your webpage a title that will appear in the browser tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FadeIn Example</title>
</head>
<body>
<!-- Content of your webpage will go here -->
</body>
</html>Step 2: Styling with CSS
Inside the <head> section, add a <style> block to define the styling for the element you want to apply the fadeIn effect to. In this case, we’re styling a <div> element with the ID fadeElement.
<style>
/* Styling for the element */
#fadeElement {
width: 200px;
height: 200px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 200px;
font-size: 20px;
opacity: 0; /* Initial opacity set to 0 for fade effect */
}
</style>Step 3: Content and Elements
In the <body> section, you can add the content of your webpage. For this example, we’ve included a “Fade In” button and a <div> element with the ID fadeElement.
<body>
<!-- Your website content -->
<button id="fadeInButton">Fade In</button>
<div id="fadeElement">FadeIn Example</div>
</body>Step 4: JavaScript Functionality
To create the fadeIn effect, you’ll use JavaScript. Inside the <body> section, just before the closing </body> tag, add a <script> block to include your JavaScript code.
<script>
const fadeInButton = document.getElementById('fadeInButton');
const fadeElement = document.getElementById('fadeElement');
fadeInButton.addEventListener('click', () => {
fadeIn();
});
function fadeIn() {
let opacity = 0;
const interval = setInterval(() => {
if (opacity < 1) {
opacity += 0.05; // Increase opacity by 0.05 in each step
fadeElement.style.opacity = opacity; // Apply new opacity to the element
} else {
clearInterval(interval); // Stop the interval when opacity reaches 1
}
}, 50); // Run the interval every 50 milliseconds
}
</script>Step 5: JavaScript Logic:
Within the <script> block, the JavaScript code listens for a click event on the “Fade In” button. When clicked, the fadeIn() function is triggered. This function gradually increases the opacity of the fadeElement by a small amount in each step, creating the fadeIn effect.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FadeIn Example</title>
<style>
/* Styling for the element */
#fadeElement {
width: 200px;
height: 200px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 200px;
font-size: 20px;
opacity: 0;
}
</style>
</head>
<body>
<!-- Your website content -->
<button id="fadeInButton">Fade In</button>
<div id="fadeElement">FadeIn Example</div>
<script>
const fadeInButton = document.getElementById('fadeInButton');
const fadeElement = document.getElementById('fadeElement');
fadeInButton.addEventListener('click', () => {
fadeIn();
});
function fadeIn() {
let opacity = 0;
const interval = setInterval(() => {
if (opacity < 1) {
opacity += 0.05;
fadeElement.style.opacity = opacity;
} else {
clearInterval(interval);
}
}, 50);
}
</script>
</body>
</html>Result:
How to create fadeIn and fadeout in JavaScript?
Here’s a step-by-step breakdown of the provided example program that demonstrates how to create fadeIn and fadeOut effects in JavaScript:
- HTML Document Structure:
Start by setting up the basic structure of an HTML document. Declare the document type, specify the language, and set the viewport for responsive design. Also, give your webpage a title that will appear in the browser tab.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FadeIn and FadeOut Example</title>
</head>
<body>
<!-- Content of your webpage will go here -->
</body>
</html>- Styling with CSS:
Inside the <head> section, add a <style> block to define the styling for the element you want to apply the fadeIn and fadeOut effects too. In this case, we’re styling a <div> element with the ID fadeElement.
<style>
/* Styling for the element */
#fadeElement {
width: 200px;
height: 200px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 200px;
font-size: 20px;
display: none; /* Initially hidden */
}
</style>- Content and Elements:
In the <body> section, add the content of your webpage. For this example, we’ve included two buttons: “Fade In” and “Fade Out,” and a <div> element with the ID fadeElement.
<body>
<!-- Your website content -->
<button id="fadeInButton">Fade In</button>
<button id="fadeOutButton">Fade Out</button>
<div id="fadeElement">FadeIn and FadeOut Example</div>
</body>- JavaScript Functionality:
To create the fadeIn and fadeOut effects, you’ll use JavaScript. Inside the <body> section, just before the closing </body> tag, add a <script> block to include your JavaScript code.
<script>
const fadeInButton = document.getElementById('fadeInButton');
const fadeOutButton = document.getElementById('fadeOutButton');
const fadeElement = document.getElementById('fadeElement');
// Event listener for the "Fade In" button
fadeInButton.addEventListener('click', () => {
fadeElement.style.display = 'block'; // Show the element
fadeIn(); // Call the fadeIn function
});
// Event listener for the "Fade Out" button
fadeOutButton.addEventListener('click', () => {
fadeOut(); // Call the fadeOut function
});
// Function to implement the fadeIn effect
function fadeIn() {
let opacity = 0;
const interval = setInterval(() => {
if (opacity < 1) {
opacity += 0.05; // Increase opacity by 0.05 in each step
fadeElement.style.opacity = opacity; // Apply new opacity to the element
} else {
clearInterval(interval); // Stop the interval when opacity reaches 1
}
}, 50); // Run the interval every 50 milliseconds
}
// Function to implement the fadeOut effect
function fadeOut() {
let opacity = 1;
const interval = setInterval(() => {
if (opacity > 0) {
opacity -= 0.05; // Decrease opacity by 0.05 in each step
fadeElement.style.opacity = opacity; // Apply new opacity to the element
} else {
fadeElement.style.display = 'none'; // Hide the element
clearInterval(interval); // Stop the interval when opacity reaches 0
}
}, 50); // Run the interval every 50 milliseconds
}
</script>- JavaScript Logic:
Within the <script> block, the JavaScript code listens for click events on both the “Fade In” and “Fade Out” buttons. When clicked, the corresponding fadeIn() or fadeOut() function is triggered. These functions gradually adjust the opacity of the fadeElement, creating the desired fadeIn and fadeOut effects. - Testing:
Save the HTML file and open it in a web browser. You’ll see two buttons: “Fade In” and “Fade Out,” and a <div> element with the text “FadeIn and FadeOut Example.” Clicking the buttons will trigger the fadeIn and fadeOut effects on the element, making it smoothly appear and disappear.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FadeIn and FadeOut Example</title>
<style>
/* Styling for the element */
#fadeElement {
width: 200px;
height: 200px;
background-color: #3498db;
color: white;
text-align: center;
line-height: 200px;
font-size: 20px;
display: none;
}
</style>
</head>
<body>
<!-- Your website content -->
<button id="fadeInButton">Fade In</button>
<button id="fadeOutButton">Fade Out</button>
<div id="fadeElement">FadeIn and FadeOut Example</div>
<script>
const fadeInButton = document.getElementById('fadeInButton');
const fadeOutButton = document.getElementById('fadeOutButton');
const fadeElement = document.getElementById('fadeElement');
fadeInButton.addEventListener('click', () => {
fadeElement.style.display = 'block';
fadeIn();
});
fadeOutButton.addEventListener('click', () => {
fadeOut();
});
function fadeIn() {
let opacity = 0;
const interval = setInterval(() => {
if (opacity < 1) {
opacity += 0.05;
fadeElement.style.opacity = opacity;
} else {
clearInterval(interval);
}
}, 50);
}
function fadeOut() {
let opacity = 1;
const interval = setInterval(() => {
if (opacity > 0) {
opacity -= 0.05;
fadeElement.style.opacity = opacity;
} else {
fadeElement.style.display = 'none';
clearInterval(interval);
}
}, 50);
}
</script>
</body>
</html>Result:
I think we already covered everything we need to know about this article trying to convey.
Nevertheless, here are other functions you can learn to enhance your JavaScript skills.
- How to combine html CSS and JavaScript in one file
- How to Dynamically Add Rows in HTML table using JavaScript?
Conclusion
In conclusion, the concept of “fadeIn” in JavaScript refers to an animation or transition effect used to gradually make an element visible by increasing its opacity from fully transparent to fully opaque. While there isn’t a built-in function for fadeIn in JavaScript, it can be achieved by manipulating CSS properties over a specific time interval.