Fade-in Animation when Scroll in your Website

This blog shows how to create a fade-in animation when scrolling down the page. It’s frequent use on the website landing page. Here we will use HTML, CSS, and JavaScript.

Here are the steps to do it;

hTML

First, on each section or div of your landing page put a class name “reveal“.

Example: Imagine that you have 3 Sections on your landing page. The first one is “home”, next is “product”, and lastly, “contact us”.

Sample Code:

<section id="home">
          <div class="reveal">
                     <!--Put home contents here-->
          </div>
</section>
<section id="product">
          <div class="reveal">
                     <!--Put product contents here-->
          </div>
</section>
<section id="contact">
          <div class="reveal">
                     <!--Put contact contents here-->
          </div>
</section>

Note: You can use any other class name if you want.

cSS

Second, put this code in your stylesheet or CSS file.

CSS Code:

/* For animation transition */
    .reveal {
        position: relative;
        transform: translateY(150px);
        opacity: 0;
        transition: 2s all ease;
    }

    .reveal.active {
        transform: translateY(0);
        opacity: 1;
    }

JavaScript

Lastly, after writing those HTML and CSS codes, create a JavaScript file and write its name “fade-in.js”. In that JS file, copy this code.

JS Code:

function reveal() {
    var reveals = document.querySelectorAll(".reveal");
  
    for (var i = 0; i < reveals.length; i++) {
      var windowHeight = window.innerHeight;
      var elementTop = reveals[i].getBoundingClientRect().top;
      var elementVisible = 150;
  
      if (elementTop < windowHeight - elementVisible) {
        reveals[i].classList.add("active");
      } else {
        reveals[i].classList.remove("active");
      }
    }
  }

window.addEventListener("scroll", reveal);

// To check the scroll position on the page load
reveal();

Note: If you use your own class name, you have to edit it in the JS file. Just remove the “reveal” with your declared class name.

Then after those steps, do not forget to link your JavaScript file to the HTML file. Copy this script tag anywhere in your HTML file.

<script defer src="fade-in.js"></script>

If you wrote it in the head of your HTML file you have you use “defer” on it. Then if you wrote it below the body you can remove the defer.

What is “defer” attribute in JavaScript?

The defer attribute is a boolean attribute. If the defer attribute is set, it specifies that the script is downloaded in parallel to parsing the page, and executed after the page has finished parsing.

Conclusion

Animations can be used to enhance the user experience on a website by providing visual cues and feedback, guiding the user’s attention, and making the interface more engaging and dynamic. They can also be used to improve the overall aesthetic of a website and make it more visually appealing. However, it’s important to use animations in a purposeful and measured way, as too many or poorly implemented animations can make a website feel cluttered or slow to interact with.