Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Adding Animations on Scroll with HTML, CSS and AOS.js
AOS.js (Animation on Scroll) is a lightweight JavaScript library that makes it easy to add scroll-triggered animations to web pages. By simply adding CSS classes and data attributes to HTML elements, you can create engaging visual effects without writing complex JavaScript code.
In this tutorial, we will explore different types of animations available in AOS.js, including fade, flip, and zoom effects, along with practical examples.
Setting Up AOS.js
Before using AOS.js, you need to include the CSS and JavaScript files in your HTML document. Add the following CDN link in the <head> section:
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
Next, add the JavaScript file and initialization code before the closing </body> tag:
<script src="https://unpkg.com/aos@next/dist/aos.js"></script> <script> AOS.init(); </script>
Fade Animations
Fade animations create smooth opacity transitions combined with movement. AOS.js provides 8 fade animation variants:
fade-upfade-downfade-leftfade-rightfade-up-leftfade-up-rightfade-down-leftfade-down-right
Example: Fade-Up Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS Fade Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0;
padding: 20px;
}
.demo-box {
width: 300px;
height: 150px;
background-color: #ce9898;
border-radius: 8px;
padding: 20px;
margin: 100px auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="demo-box" data-aos="fade-up">
Fade Up Animation!
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
To use other fade animations, simply replace the data-aos value:
<div data-aos="fade-down">Fade Down!</div> <div data-aos="fade-left">Fade Left!</div> <div data-aos="fade-right">Fade Right!</div>
Flip Animations
Flip animations create a 3D flipping effect. There are 4 flip animation types:
flip-upflip-downflip-leftflip-right
Example: Flip Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS Flip Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0;
padding: 20px;
}
.demo-box {
width: 300px;
height: 150px;
background-color: #4a90e2;
border-radius: 8px;
padding: 20px;
margin: 100px auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="demo-box" data-aos="flip-up">
Flip Up Animation!
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
Zoom Animations
Zoom animations create scaling effects. AOS.js provides 10 zoom animation variants:
zoom-inzoom-in-upzoom-in-downzoom-in-leftzoom-in-rightzoom-outzoom-out-upzoom-out-downzoom-out-leftzoom-out-right
Example: Zoom Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AOS Zoom Animation</title>
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<style>
body {
text-align: center;
font-size: 150%;
margin: 0;
padding: 20px;
}
.demo-box {
width: 300px;
height: 150px;
background-color: #50c878;
border-radius: 8px;
padding: 20px;
margin: 100px auto;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
}
</style>
</head>
<body>
<div class="demo-box" data-aos="zoom-in" data-aos-duration="1500">
Zoom In Animation!
</div>
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
AOS.init();
</script>
</body>
</html>
Animation Settings and Attributes
AOS.js provides several data attributes to customize animations:
| Attribute | Description | Example |
|---|---|---|
data-aos-duration |
Animation duration in milliseconds | data-aos-duration="1500" |
data-aos-delay |
Delay before animation starts | data-aos-delay="500" |
data-aos-once |
Animation occurs only once | data-aos-once="true" |
Example: Custom Animation Settings
<div data-aos="fade-down"
data-aos-duration="2000"
data-aos-delay="300"
data-aos-once="true">
Custom Animation with Settings!
</div>
Conclusion
AOS.js provides an easy way to add scroll-triggered animations to web pages with minimal setup. By using different animation types and customization options, you can create engaging user experiences that enhance your website's visual appeal.
6K+ Views
