bancuri, glume, imagini, video, fun, bancuri online, bancuri tari, imagini haioase, videoclipuri haioase, distractie online Pe HaiSaRadem.ro vei gasi bancuri, glume, imagini, video, fun, bancuri online, bancuri tari, imagini haioase, videoclipuri haioase, distractie online. Nu ne crede pe cuvant, intra pe HaiSaRadem.ro ca sa te convingi.

AOS

Animate On Scroll Library

Scroll down

Fade

<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>

Flip

<div data-aos="flip-left"></div>
<div data-aos="flip-right"></div>
<div data-aos="flip-up"></div>
<div data-aos="flip-down"></div>

Zoom

<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>

Different settings examples

<div data-aos="fade-up"
     data-aos-duration="3000">
</div>
<div data-aos="fade-down"
     data-aos-easing="linear"
     data-aos-duration="1500">
</div>
<div data-aos="fade-right"
     data-aos-offset="300"
     data-aos-easing="ease-in-sine">
</div>
<div data-aos="fade-left"
     data-aos-anchor="#example-anchor"
     data-aos-offset="500"
     data-aos-duration="500">
</div>
<div data-aos="fade-zoom-in"
     data-aos-easing="ease-in-back"
     data-aos-delay="300"
     data-aos-offset="0">
</div>
<div data-aos="flip-left"
     data-aos-easing="ease-out-cubic"
     data-aos-duration="2000">
</div>

Anchor placement

<div data-aos="fade-up"
     data-aos-anchor-placement="top-bottom">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="center-bottom">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="bottom-bottom">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="top-center">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="center-center">
</div>
<div data-aos="fade-up"
     data-aos-anchor-placement="bottom-center">
</div>

Get it

Download View on github

Install using Yarn, Npm, Bower

yarn add aos
npm install aos --save
bower install aos --save

CDN sources

CSS

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Initialize AOS

<script>
  AOS.init();
</script>