Animation on Scrolling in HTML, CSS & JavaScript | Project Series Day - 16 | Frontend everything
Hello Everyone 👋Welcome to My New Blog. Today I have made a Page in which it animates on scroll with the help of HTML, CSS | It is Project Series Day 16. 😍
I am Piyush, Sharing About Web development Daily. You can also check out me at @frontendeverything.
Let's start making this simple animate or scroll step by step.
Video of the project,
So that was the preview now let us start making the project 😄 First, we will code HTML then CSS and javascript, and also I have shared codepen ink to make it easier for you.
HTML 🎈( step - 1)
We have used the AOS animation library so you have to import that first in the head section like this
<head>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
</head>After you import the links you have to write HTML. we will make containers in it and you just have to put class in it. like in which container you want the animation.
<div class="item" data-aos="fade-up">Fade-Up</div>
<div class="item" data-aos="fade-down">Fade-Down</div>
<div class="item" data-aos="fade-right">Fade-Right</div>
<div class="item" data-aos="fade-left">Fade-Left</div>
<div class="item" data-aos="zoom-in">Zoom-in</div>
<div class="item" data-aos="zoom-out">Zoom-out</div>
<div class="item" data-aos="slide-up">Slide-Up</div>
<div class="item" data-aos="flip-up">Flip-Up</div>
<div class="item" data-aos="flip-down">Flip-Down</div>
<div class="item" data-aos="flip-right">Flip-Right</div>
<div class="item" data-aos="flip-left">Flip-Left</div>
CSS🎈( step - 2)
Now we will design the containers so that they look like a box.
.item {
width: 200px;
height: 100px;
margin: 50px auto;
padding-top: 70px;
background: #3496c7;
text-align: center;
color: #FFF;
font-size: 1.5em;
}
JavaScript🎈( step - 3)
in Javascript, we will define the time for the animation.
AOS.init({
duration: 1000,
})
All the coding part is done, now let us see the final output, and also below I have mentioned the codepen link.
Final Output
The codepen link is here for making your work easier!
.
.
.
.
.
.
Thank You For Scrolling Till here 😊. If You gain any knowledge then do checkout me at @frontendeverything. I am Piyush 🎉 I provide Content related to programming, technology, web development Daily.
.