Animation improves the user experience of the website and also impresses the visitors. With the use of CSS and jQuery, one can easily create any kind of animation. But, what if you want a ready made solution. “Animate On Scroll” is for you.
“Animate On Scroll” or AOS is easy to use library which lets you quickly add scrolling animation effects on your website.
How to use
Like other libraries, you only need to include CSS and JS files.
<link href="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.css" rel="stylsheet">
Initialize the script on page
After this, you only need to add data-aso to the element and define the animation class for it. For example, if you want to use “Fade right”effect, use this.
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">data-aos</span>=<span class="hljs-value">"fade-right"</span>></span><span class="hljs-tag"></<span class="hljs-title">div</span>></span>
Demo | Download
- Compatibility: Modern Browsers with CSS3 transform support
- License: MIT License