How to Fade In a Page on Load with CSS & JavaScript
Fading In a Page on Load with CSS & JavaScript
Fading in a page when it loads is a great way to grab the user’s attention. You can use a combination of CSS and JavaScript to achieve this effect, allowing you to easily create polished page transitions. This tutorial will show you how to get started and fade in an entire page with just a few lines of code.
Step 1: HTML Setup
First, we need to setup the basic HTML structure for our page. We’ll start with a basic page structure using the HTML5 <!DOCTYPE>. Then we’ll add a <div>, which will hold our entire page. Finally, we’ll add two more <div> elements inside the parent <div>: one for the heading and one for the content.
<!DOCTYPE html>
<html>
<head>
<title>Fade In Page</title>
</head>
<body>
<div class="page">
<div class="heading">
<h1>Fade In Page</h1>
</div>
<div class="content">
<!-- Content Goes Here -->
</div>
</div>
</body>
</html>
Step 2: CSS Setup
Next, we need to define some basic styles. We have two <div> elements inside the parent <div> that we need to account for. We’ll use flexbox to help us easily define the page layout. We’ll also assign a --delay custom property to the page itself. This will allow us to control the page’s fading speed based on the value assigned to this property.
.page {
display: flex;
flex-direction: column;
--delay: 0.4s;
}
.heading {
background-color: #222;
color: #fff;
padding: 25px;
text-align: center;
}
.content {
flex: 1 0 auto;
padding: 25px;
}
Step 3: JavaScript Setup
Finally, we need to write a bit of JavaScript to handle the page fade in. We’ll create a function called fadeInPage() that will be called when the page loads. This function will get the page’s style object and then set the opacity property to 1 — this will make the page visible. We’ll also add a transition style that will animate the page’s fade in effect. The timing of the fade in effect will be based on the --delay custom property that we specified earlier.
function fadeInPage() {
let page = document.querySelector(".page");
page.style.opacity = 1;
page.style.transition = `opacity ${page.style.getPropertyValue("--delay")} ease-in-out`;
}
// When the page loads, call the fadeInPage() function
window.addEventListener("load", fadeInPage);
And with that, your page should now fade in when it loads!
