What IS AOS.JS?
This library was created by Michal Sajnóg and he also created this website that demonstrates all of the various sorts of animations you’ll provide to your HTML elements.
How AOS Works
The idea behind AOS is straightforward: watch all elements and their positions based on the settings you provide them. Then add or remove the class with the aos-animate library. In practice, it’s not easy sometimes, but the AOS idea is as simple as that. CSS handles animation in every aspect.
CDN sources:
CSS CDN
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
JS CDN
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
Initialize AOS
<script>
AOS.init();
</script>
SOME EXAMPLES WITH HTML:
<div class="item" data-aos="fade-up">1</div>
<div class="item" data-aos="fade-down">2</div>
<div class="item" data-aos="fade-right">3</div>
<div class="item" data-aos="fade-left">4</div>
<div class="item" data-aos="zoom-in">5</div>
<div class="item" data-aos="zoom-out">6</div>
<div class="item" data-aos="slide-up">7</div>
<div class="item" data-aos="flip-up">8</div>
<div class="item" data-aos="flip-down">9</div>
<div class="item" data-aos="flip-right">10</div>
<div class="item" data-aos="flip-left">11</div>
CSS
* {
box-sizing: border-box;
}
.item {
width: 200px;
height: 200px;
margin: 50px auto;
padding-top: 75px;
background: #ccc;
text-align: center;
color: #FFF;
font-size: 3em;
}
You can use this code in your HTML template with the latest bootstrap. After that, you can check the output in the browser.
Aos.js Library has more features for implementation animation in web pages. You can get more info:
https://michalsnik.github.io/aos/
https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library/
StudySection gives an opportunity to beginners and experts in .NET framework to go through StudySection’s .NET certification exam and get a .NET Certification Exam for enhancement of career in programming. If you have knowledge of the .NET framework then you can get a certificate through an online exam at StudySection.
