Animation effects on web page scroll – AOS
December 31, 2022 - by admin
AOS (Animate On Scroll) is a popular JavaScript library that allows you to easily add animation effects to your web page as the user scrolls. It is lightweight, easy to use, and highly customizable, making it a great choice for adding subtle animation effects to your web page.
To use AOS, you will first need to include the AOS library in your HTML file by adding the following line of code:
<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>Once you’ve included the library, you can then add animation effects to your HTML elements by applying the “data-aos” attribute to the elements you want to animate. For example:
Fade up animations with durations
<div data-aos="fade-up" data-aos-easing="linear" data-aos-duration="1500">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</p>
</div>Fade down animation with durations
<div data-aos="fade-down" data-aos-easing="linear" data-aos-duration="1000">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever</p>
</div>You can also set the animation duration by adding the “data-aos-duration” attribute and the value in milliseconds, as shown above.
AOS has a wide range of animations you can use, such as “fade-up”, “fade-down”, “fade-right”, “fade-left”, “zoom-in”, “zoom-out”, “flip-up”, “flip-down”, “flip-left”, “flip-right”.
Put the below in before the body tag to initiate the animation
<script>
AOS.init();
</script>You can find more information on the different options and settings available in the AOS documentation at: https://michalsnik.github.io/aos/
In conclusion, AOS is a powerful and easy-to-use JavaScript library that allows you to add animation effects to your web page as the user scrolls. It is lightweight, highly customizable, and has a wide range of animation options, making it a great choice for adding subtle animation effects to your web page.
