Create Scroll Reveal effect using just Vanilla JavaScript.

Welcome to my JavaScript tutorial, where I dive into the world of web development and explore the captivating realm of scroll reveal effects using vanilla JavaScript. As a modern website strives to deliver engaging and immersive user experiences, incorporating subtle animations and dynamic elements has become a hallmark of effective design.

In this guide, I'll walk you through the steps of creating scroll reveal animations without relying on external libraries or frameworks. Whether you're a beginner eager to enhance your JavaScript skills or a seasoned developer looking to add an extra layer of interactivity to your projects, join me on this journey as I unravel the magic behind scroll-based animations.

Demo:

Initialize a webpage with basic HTML and few elements.

Here, I have created a webpage which has basic HTML elements containing, services with product cards.

You can see, I have added fade-up class for products. We will use this class to identify elements to be animated.

Let's start animating in JavaScript!

First, we need to get all elements with fade-up class. We will be using querySelectorAll selector to select all elements with fade-up class.

Now, we need Scroll event listener to trigger our scrollRevealCheck() function. This function will iterate through all scroll reveal elements that are in fadeUpElements and check if they are visible on screen.

To check, whether the element is inside view box or visible on screen, we will use getBoundingClientRect() method to get position relative to the viewport. If the position relative to the viewport is greater than height of the screen, the element is not visible on the screen.

Therefore, Let's create a function isElementOutOfView to check if the element is outside the viewport. isElementOutOfView will return true if an element is outside the viewport.

Note: 100 is a threshold for scroll reveal. Which means, the function will return false (element is visible) only when at least 100px of the element is visible on the screen.

Let's define scrollRevealCheck() function.

displayFadeUpElement() is triggered when the element is visible on the screen. In this function, we will add fade-up-scrolled class on the element. Likewise, hideFadeUpElement will remove the fade-up-scrolled class.

Now, we just need to define CSS classes.

fade-up class translates the element 100px (y-axis) to the bottom and fade-up-scrolled class translates the element back to 0px (y-axis). Scale and Opacity are set to give that extra smooth animation effect.

That's it! We have successfully made a Scroll Reveal Effect using Vanilla JavaScript.

Full Source Code:

GitHub Link to source code -->

Thank you for joining me on this exploration of scroll reveal effects using vanilla JavaScript. I hope this tutorial has equipped you with the knowledge and skills to add engaging animations to your web projects. Remember, the beauty of coding lies in the endless possibilities for creativity and innovation. As you embark on your coding journey, feel free to experiment, tweak, and personalize these techniques to suit your unique vision. If you found this guide helpful, I'm genuinely grateful for your time and engagement. Happy coding, and may your future projects be filled with captivating scroll-based animations. Thank you again, and until next time!