Learn how to add engaging scroll animations to your website to captivate users and enhance the browsing experience. This guide covers essential tips and techniques for creating smooth, interactive effects. Below is the source code for this in HTML, CSS, and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>On-Scroll Animation - Sahil Haryana</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>
<body>
<div class="container-body" data-aos="fade-in" data-aos-duration="4000">
<h1>On-Scroll Animation - By Sahil Haryana</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat amet, est quo adipisci, odio aspernatur nostrum modi dolore quisquam illum dignissimos saepe blanditiis nam, unde earum? A modi id alias.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem magnam cumque doloribus incidunt repudiandae aspernatur cupiditate placeat nemo amet consequuntur quidem voluptates aut, fuga, reiciendis ratione est iusto possimus nesciunt?</p>
</div>
<main>
<div class="container" data-aos="fade" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container" data-aos="fade-up" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container" data-aos="fade-down" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container" data-aos="fade-left" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container-body" data-aos="fade-right" data-aos-duration="4000">
<h1>On-Scroll Animation - By Sahil Haryana</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat amet, est quo adipisci, odio aspernatur nostrum modi dolore quisquam illum dignissimos saepe blanditiis nam, unde earum? A modi id alias.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem magnam cumque doloribus incidunt repudiandae aspernatur cupiditate placeat nemo amet consequuntur quidem voluptates aut, fuga, reiciendis ratione est iusto possimus nesciunt?</p>
</div>
<div class="container" data-aos="fade-up-right" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container" data-aos="fade-up-left" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container" data-aos="fade-down-right" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container" data-aos="fade-down-left" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container-body" data-aos="flip-up" data-aos-duration="4000">
<h1>On-Scroll Animation - By Sahil Haryana</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat amet, est quo adipisci, odio aspernatur nostrum modi dolore quisquam illum dignissimos saepe blanditiis nam, unde earum? A modi id alias.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem magnam cumque doloribus incidunt repudiandae aspernatur cupiditate placeat nemo amet consequuntur quidem voluptates aut, fuga, reiciendis ratione est iusto possimus nesciunt?</p>
</div>
<div class="container" data-aos="flip-down" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container" data-aos="flip-right" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
<div class="container" data-aos="flip-left" data-aos-duration="4000">
<h1>On-Scroll Animation</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci modi quia maiores expedita doloremque culpa quidem eveniet incidunt corporis ratione voluptatem dolorem, commodi ex! Rem, iste incidunt. Facilis, minima quaerat?</p>
</div>
</main>
</body>
</html>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
flex-wrap: wrap;
margin-top: 50px;
justify-content: center;
background-color: black;
}
.container-body{
height: auto;
width: 80%;
background-color:aliceblue;
padding: 20px;
margin: 30px;
box-shadow: 0px 0px 3px;
}
main{
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 400px;
}
.container{
height: auto;
width: 30%;
background-color:aliceblue;
padding: 20px;
margin: 30px;
box-shadow: 0px 0px 3px;
}
// JavaScript code goes here
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
Here's a simple explanation of the code structure for adding on-scroll animations:
HTML: This code uses the AOS (Animate On Scroll) library to apply animations to each section. Every <div> with data-aos attributes (like fade, fade-up, flip-up) tells AOS which animation to use. The data-aos-duration="4000" attribute sets the animation speed to 4 seconds.
CSS: Basic styles are applied here, like centering content, setting background colors, and applying shadows. The .container and .container-body classes define the style and layout for each animated section, giving each a background, padding, and shadow effect.
JavaScript: The AOS library is initialized with AOS.init() in the <script> tag. This line ensures all elements with data-aos attributes animate smoothly as the user scrolls.
This simple setup lets you add engaging scroll animations with minimal code.
Installation
First, you need to install the AOS library. You can do this by linking the following stylesheet in your <head>:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
Add script right before closing </body> tag, and initialize AOS:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
<div data-aos="fade-in" data-aos-duration="4000"></div>
Predefined AOS Animations to Animate your website while scrolling. -
There are some Predefined animations in AOS library. Below are the list-
You just need to edit the AOS animation name. Simply just select the animation from the below list.
Predefined options
Animations
Fade animations:
fade
fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left
Flip animations:
flip-up
flip-down
flip-left
flip-right
Slide animations:
slide-up
slide-down
slide-left
slide-right
Zoom animations:
zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right
Anchor placements:
top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top
Easing functions:
linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart
To learn more please visit https://github.com/michalsnik/aos
Usefull links for you -
How do I animate a website while scrolling?