How to Create Fade-in Effect on Page Load - 4 Ways [CSS/JS]

When I visit a webpage, I get annoyed when I try to interact with elements while the website is still loading. Often stuff is moving around, fonts aren’t quite loaded, and it feels broken.

I know nowadays we are obsessed in this industry with gaining every millisecond in page performance.

But in a couple of projects that I recently overhauled, I added a subtle and clean loading mechanism that I think makes the experience nicer, even if it does ultimately slightly delay the time that the user is able to start interacting with the page.

Also Read: Create Social Share Link Without Any Tool

Hence, in this article you will learn about how to fade-in your pages with CSS, JavaScript and jQuery.

Method 1: Using CSS animation property

You can use animation and transition property to create a fade-in effect on page load using CSS.

A CSS animation is defined with 2 keyframes. One with the opacity set to 0, the other with the opacity set to 1.

When the animation type is set to ease, the animation smoothly fades in the page. This property is applied to the body tag.

Whenever the page loads, this animation would play and the page will appear to fade in. The time of the fade in can be set in the animation property.

body {
  animation: fadeInAnimation ease 3s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Example:

See the Pen Fade-in Effect on Page Load – Example 1 by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

Method 2: Using CSS transition property

In this method, the body can be set to the opacity 0 initially and the transition property is used to animate this property whenever it is changed. When the page is loaded, the opacity is set to 1 using the onload event.

Due to the transition property, changing the opacity now will appear to fade in the page. The time of the fade in can be set in the transition property.

body {
  opacity: 0;
  transition: opacity 5s;
}

 <body onload="document.body.style.opacity='1'">
 
</body>

Example:

See the Pen Fade-in Effect on Page Load – Example 2 by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

Method 3: Using CSS & JavaScript

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 of CSS. By adding and removing the fade class on the body element, you can cause the opacity to transition from 0 to 1:

body {
  opacity: 1;
  transition-duration: 0.7s;
  transition-property: opacity;
}

body.fade {
    opacity: 0;
  }

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.

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

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.body.classList.add('fade');
    document.addEventListener("DOMContentLoaded", () => {
      window.setTimeout(function() {
        document.body.classList.remove('fade');
      }, 230);
    });
  </script>
</body>

The .remove() method will remove the fade class.

See the Pen Fade-in Effect on Page Load – Example 3 by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

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.

Hence in this method you used a combination of JavaScript and CSS to create a fade-in effect when a page is loaded. You first used opacity and transition to create the effect. Then you used DOM manipulation to add and remove a class which triggers the transition.

Method 4: Fade-in effect on page load With jQuery

A jQuery solution provides a simple way to create a fade in/out effect on page load that can be apply on the entire page or a specific element.

First include the jQuery JavaScript library on your web page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Then include the following jQuery script.

 <script>
      (function ($) {
        $.fn.pagefade = function (fadein, fadeout) {
          this.css('display', 'none');
          this.fadeIn(fadein);
          $('a').click(function (event) {
            event.preventDefault();
            linkLocation = this.href;
            this.fadeOut(fadeout, redirectPage);
          });
          function redirectPage() {
            window.location.disabled = linkLocation;
          }
          return this;
        };
      })(jQuery);
    </script>

And finally, call the function on the element that will fade in/out on page load.

 <script>
      $(document).ready(function () {
        $('html, body').pagefade(1000, 1000);
      });
</script>

Example:

See the Pen Fade-in Effect on Page Load – Example 4 by Sunil Pradhan (@Sunil_Pradhan) on CodePen.

Conclusion

So here is the end of this article, in sort I have mentioned four ways to achieve the same fade-in effect on page load. Whichever way you are feeling comfortable can use on your project.

Until then, Stay Happy, Stay safe. Keep coding! Thank you for reading.