Tutorial

How To Create a Fade-In Page Transition Effect with JavaScript and CSS

Updated on December 29, 2020

JavaScript

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 the classList 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:

index.html

<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:

index.html

<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:

index.html

<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:

index.html

<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:

index.html

<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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors