CSS Scroll Animation is a very useful animation to make users scroll down. Basically, this animation animates some down arrows to go down from up with a fade in and fade out effect.
Also, Read – Magnetic Hover Interaction
How to create CSS scroll animation?
In this tutorial, we will learn how to create this animation using CSS. I will try to explain every single line of the code.
Now, let’s break down this project into small easy tasks
- Link Font Awsome icons CSS file via CDN
- Create or Write 3 down arrow icons
- Style the icons
- Animate the icons
Link Font Awsome icons CSS file via CDN
Linking of CSS files in HTML can be done with <link> tag.
Link tag – It is used to define the relationship between the current document and the external resource.
We will link the Font Awsome icons CSS file with CDN
CDN – A Content Delivery Network (CDN) is a group of servers distributed all over the globe geographically to provide fast delivery of internet content.
We can link it like below
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
/>Here are the definitions of the above keywords
rel – relationship(rel) defines the type of relationship between the current document and the external document.
href – Hypertext Reference defines the link to an external document.
Create or Write 3 down arrow icons
Now, we will use 3 down arrows from the Font Awesome icons. We can group the icons inside a <div> tag
<div class="scroll">
<div>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div>
<i class="fa-solid fa-chevron-down"></i>
</div>
<div>
<i class="fa-solid fa-chevron-down"></i>
</div>
</div>We can use Font Awesome icons using Font Awesome class inside an <i> tag. Find out more on Font Awesome website.
Style the icons
Next, we need to style our icons so they look good on our website.
.scroll > div {
width: 50px;
height: 40px;
font-size: 50px;
text-align: center;
color: #fff;
}Here we selected every div tag inside the scroll class div tag. Now, we can set the width, height, font size, and color of the icons.
Animate the icons
This is the most important part of this tutorial, we need to animate the icons.
We can do that by using keyframes in CSS
@keyframes scroll-down {
0% {
opacity: 0;
transform: translateY(-40px);
}
50% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(40px);
}
}Here, we are setting the initial opacity to 0 and the initial Y position of every icon to -40 pixels.
Next, when the animation reaches 50% of its lifetime we set the opacity to 1, and then when it reaches 100% of its lifetime we set the opacity to 0, and the Y position to 40 pixels.
Now, we will set this animation to our icons using the animation property on them
.scroll > div {
width: 50px;
height: 40px;
font-size: 50px;
text-align: center;
color: #000;
animation: scroll-down 2s infinite; /* Here we used the animation property */
}The animation property requires the name and time of the animation.
Our animation name is “scroll-down” animation time is 2 seconds, with that we want our animation to play infinitely so we set the animation count to infinite.
Finally, we want the second and third icons to move after some delay
.scroll > div:nth-child(2) {
animation-delay: -0.1s;
}
.scroll > div:nth-child(3) {
animation-delay: -0.2s;
}Let’s understand the above code
nth-child(n) – This selector is used to select every nth child of its parent.
animation-delay – The animation-delay property defines the delay for the start of an animation.
We set the second and third icon’s animation delay to -0.1 seconds and -0.2 seconds respectively.
With that said we have our scroll-down animation.
The source code is available on Github.
That’s it for this tutorial, Please share this article with your friends and if you have any doubts then dm me on Instagram at @rareprogrammer or @codedesignerworld
