About 3 months ago, while developing my website, I thought about making my website even cooler. This is what I want to do : I want items on my website to appear only when I scroll to them. In other words, before scrolling, the item will not exist. Hard enough to imagine? Roughly the result like this:
This animation can be created with the Animate On Scroll (AOS) library by michalsnik at michalsnik.github.io.
Get Started
There are 2 ways to add this library to your website. The first way is to install it, and the second way is through the CDN service. I myself use a CDN service. Here is some code you should add.
CSS
add this code inside the head tag in your HTML code.
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
Javascript
add this code at the very bottom of your body tag.
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
Initialize AOS
Finally, add the following code to your javascript file.
AOS.init();
If you have done all of the things above, then you are ready to use this library.
Animation
In order to have an animation, add the data-aos attribute to the html tag you want. With this data-aos, your tags now have animations. There are different values in the data-aos attribute, different values mean different animations. Here are some of them :
-
data-aos="fade-up", for moving-up -
data-aos="fade-down",for moving-down -
data-aos="fade-right", for move to the right -
data-aos="fade-left", for move to the left -
data-aos="fade-flip-left", for flip to the left -
data-aos="fade-flip-right", for flip to the right -
data-aos="zoom-in", for zoom in -
data-aos="zoom-out", for zoom-out
Actually, there are many more data-aos values available. For more complete data-aos, you can visit the official Animate On Scroll website at michelsnik.github.io.
Live Demo
I will show you how to use animate on scroll library.
1. Set Up Standard HTML Tag
this file contains the basic html tags to create a box with the words box 1 , box 2 and so on.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class='container'>
<div class='box'>box 1</div>
<div class='box'>box 2</div>
<div class='box'>box 3</div>
<div class='box'>box 4</div>
</div>
</body>
</html>
2. Prepare CSS files for basic styles
This file contains the basic styles for box such as background color, padding, margins, and so on.
.box{
text-align:center;
font-size:2em;
padding:90px;
border-radius:8px;
border:5px #33ff33;
margin: 30px;
background:#66ff66;
width:auto;
height:30px;
}
.container{
background:#3385ff;
padding:auto;
padding-top:20px;
padding-bottom:20px;
}
3. Add CDN code to import AOS library
CSS
Add this code inside the head tag
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
Javascript
add this code at the very bottom of your body tag.
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
4. Initialize AOS
add the following code to the javascript file.
AOS.init();
after all of the things above is done, the result will be like this:
Keep in mind that you can change the style of the above CSS as you wish. In the example above I only use 4 types of data-aos. You can see more complete documentation on this website.
To see the implementation of this AOS data on the website, you can visit my website which also uses the AOS library here.
Top comments (0)