Tutorial
How To Create a Fade-In Page Transition Effect with JavaScript and CSS
Introduction
Page transition effects provide a visual aesthetic for your application’s user experience. JavaScript can detect when the document object model is loaded and be used to add or remove a class that applies a CSS transition to create a “fade-in” effect.
In this article you will learn about how to fade-in your pages with JavaScript and CSS.
Prerequisites
To complete this tutorial, you will need the following:
- An understanding of the
classListobject is suggested, but not required. To learn more about theclassListobject, check out our How to Modify CSS Classes in JavaScript tutorial.
Step 1 — Using CSS opacity and transition
First, you will need to create CSS rules for when the page is opened and when the page is fading in. This effect will rely upon the opacity and transition properties. By adding and removing the fade class on the body element, you can cause the opacity to transition from 0 to 1:
<head>
<style>
body {
opacity: 1;
transition-duration: 0.7s;
transition-property: opacity;
}
body.fade {
opacity: 0;
}
</style>
</head>
The fade-in code you will write will quickly apply the fade class to the body element and set it to have no opacity (0). Once the page is loaded you will remove the fade class from the body element and have it set to full opacity (1) over the duration of 0.7 seconds.
Step 2 — Applying the Fade-in Class
In your page, right right after the opening body tag, assign the fade class to the body element:
<body>
<script>
document.body.className = 'fade';
</script>
<!-- ... -->
</body>
Alternatively, if your body element contains existing classes, you can apply the fade class using the .add() method on the classList object.
In your index.html file, append the .add() method to the classList object, and insert the fade class as an argument:
<body>
<script>
document.body.classList.add('fade');
</script>
<!-- ... -->
</body>
This will add the fade class to your existing classes.
Step 3 — Removing the Fade-in Class
To remove a fade-in transition from your classes, you may implement an event listener for when the document object model has loaded. You may also want to implement a delay to ensure the transition effect is visible to a reader.
In your index.html file, employ an event listener and assign the class name on your body element the value of an empty string:
<body>
<!-- ... -->
<script>
document.addEventListener("DOMContentLoaded", () => {
window.setTimeout(function() {
document.body.className = '';
}, 230);
});
</script>
</body>
The empty string tells JavaScript to revert the class name after the page has loaded.
Alternatively, if your body element contains existing classes, use the .remove() method on the classList object:
<body>
<!-- ... -->
<script>
document.addEventListener("DOMContentLoaded", () => {
window.setTimeout(function() {
document.body.classList.remove('fade');
}, 230);
});
</script>
</body>
The .remove() method will remove the fade class.
Now, when you load the page, it will initially add a fade class to the body element. A CSS transition will start changing the opacity from 0 to 1 over the course of 0.7 seconds. Once the page has completed loading, the fade class will be removed from the body element.
Conclusion
In this article, you used a combination of JavaScript and CSS to create a “fade-in” effect when a page is loaded. You used opacity and transition to create the effect. Then you used DOM manipulation to add and remove a class which triggers the transition.
