Scroll animation is a popular technique used to create engaging and interactive websites. In this tutorial, we’ll show you how to create scroll animations using CSS.
Before we begin, it’s important to note that scroll animations can affect website performance, so it’s essential to optimize them for better user experience. Let’s get started.
1. Setting up the HTML structure
First, we need to create the HTML structure for our scroll animation. We’ll create a section with a height of 100vh, which will be our container for the animation. Inside the section, we’ll add a div element that will contain the content we want to animate. We’ll also give the div a class of “animate” to target it with CSS.
<section class="container">
<div class="animate">
<h1>Welcome to my website</h1>
<p>Scroll down to see the animation</p>
</div>
</section>
2. Adding styles to the container
Next, we’ll add some basic styles to the container to position it in the center of the viewport.
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
3. Creating the animation using keyframes
Now, let’s create the actual animation using CSS keyframes. We’ll start by setting the initial state of the animated element using the from keyword. In this case, we’ll set the opacity to 0 to make the element invisible.
@keyframes fadeIn {
from {
opacity: 0;
}
}
Next, we’ll set the end state of the animation using the to keyword. In this case, we’ll set the opacity to 1 to make the element fully visible.
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
4. Adding the animation to the animated element
Now, we need to apply the animation to the animated element using the animation property. We’ll set the animation duration to 1 second and the animation timing function to ease-in-out to make the animation smoother.
.animate {
animation: fadeIn 1s ease-in-out;
}
5. Triggering the animation on scroll
Finally, we need to trigger the animation when the user scrolls to the section containing the animated element. We’ll use the scroll event to detect when the user scrolls and the getBoundingClientRect() method to check if the section is visible on the screen.
const section = document.querySelector('.container');
const animate = document.querySelector('.animate');const sectionTop = section.getBoundingClientRect().top;
const sectionBottom = section.getBoundingClientRect().bottom;
animate.classList.add(‘active’);
} else {
animate.classList.remove(‘active’);
}
});
In this code, we’re checking if the top of the section is less than the height of the viewport and the bottom of the section is greater than or equal to 0. If the section is visible on the screen, we add the class active to the animated element. If the section is not visible, we remove the class.
6. Adding styles to the active state
Finally, we need to add some styles to the active state of the animated element to make it visible. We’ll set the opacity to 1 and the transform property to translate the element 50px down to create a smooth animation effect.