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
classList
object is suggested, but not required. To learn more about theclassList
object, 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.