AOS (Animate On Scroll)
Animate on scroll library.
Official documentation
For more detailed information and examples, see the official documentation: AOS .
How to use?
Add the following library Aos stylesheet and script in your page.
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../../assets/vendor/aos/dist/aos.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="../../assets/vendor/aos/dist/aos.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
$(document).on('ready', function () {
// initialization of aos
AOS.init({
duration: 650,
once: true
});
});
</script>
Basic example
<div data-aos="fade-up"></div><div data-aos="fade-down"></div><div data-aos="fade-right"></div><div data-aos="fade-left"></div><div data-aos="fade-up-right"></div><div data-aos="fade-up-left"></div><div data-aos="fade-down-right"></div><div data-aos="fade-down-left"></div><div data-aos="flip-left"></div><div data-aos="flip-right"></div><div data-aos="flip-up"></div><div data-aos="flip-down"></div><div data-aos="zoom-in"></div><div data-aos="zoom-in-up"></div><div data-aos="zoom-in-down"></div><div data-aos="zoom-in-left"></div><div data-aos="zoom-in-right"></div><div data-aos="zoom-out"></div><div data-aos="zoom-out-up"></div><div data-aos="zoom-out-down"></div><div data-aos="zoom-out-right"></div><div data-aos="zoom-out-left"></div>
<div class="row">
<div class="col-sm-6 mb-11">
<div class="card" data-aos="fade-up">
<div class="card-body" data-aos="fade-up">
<pre><code class="html"><div data-aos="fade-up"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="fade-down">
<div class="card-body" data-aos="fade-down">
<pre><code><div data-aos="fade-down"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="fade-right">
<div class="card-body" data-aos="fade-right">
<pre><code><div data-aos="fade-right"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="fade-left">
<div class="card-body" data-aos="fade-left">
<pre><code><div data-aos="fade-left"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="fade-up-right">
<div class="card-body" data-aos="fade-up-right">
<pre><code><div data-aos="fade-up-right"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="fade-up-left">
<div class="card-body" data-aos="fade-up-left">
<pre><code><div data-aos="fade-up-left"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="fade-down-right">
<div class="card-body" data-aos="fade-down-right">
<pre><code><div data-aos="fade-down-right"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="fade-down-left">
<div class="card-body" data-aos="fade-down-left">
<pre><code><div data-aos="fade-down-left"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="flip-left">
<div class="card-body">
<pre><code><div data-aos="flip-left"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="flip-right">
<div class="card-body">
<pre><code><div data-aos="flip-right"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="flip-up">
<div class="card-body">
<pre><code><div data-aos="flip-up"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="flip-down">
<div class="card-body">
<pre><code><div data-aos="flip-down"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-in">
<div class="card-body">
<pre><code><div data-aos="zoom-in"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-in-up">
<div class="card-body">
<pre><code><div data-aos="zoom-in-up"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-in-down">
<div class="card-body">
<pre><code><div data-aos="zoom-in-down"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-in-left">
<div class="card-body">
<pre><code><div data-aos="zoom-in-left"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-in-right">
<div class="card-body">
<pre><code><div data-aos="zoom-in-right"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-out">
<div class="card-body">
<pre><code><div data-aos="zoom-out"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-out-up">
<div class="card-body">
<pre><code><div data-aos="zoom-out-up"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-out-down">
<div class="card-body">
<pre><code><div data-aos="zoom-out-down"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-out-right">
<div class="card-body">
<pre><code><div data-aos="zoom-out-right"></div></code></pre>
</div>
</div>
</div>
<div class="col-sm-6 mb-11">
<div class="card" data-aos="zoom-out-left">
<div class="card-body">
<pre><code><div data-aos="zoom-out-left"></div></code></pre>
</div>
</div>
</div>
</div>