<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>
AOS - Animate on scroll library
</title>
<meta content="AOS - Animate On Scroll library using CSS3" name="description">
<meta content="AOS, animate on scroll, css3 scroll animations, simple scroll animations" name="keywords">
<meta content="width=device-width" name="viewport">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<!-- <link rel="stylesheet" href="http://localhost:3002/dist/aos.css" /> -->
<link href="dist/css/styles.css" rel="stylesheet">
</head>
<body>
<div class="backgrounds overlay">
<div class="background" data-aos="fade-in" data-aos-anchor=".section--hero" data-aos-duration="1500" style="background-image: url('img/bg.jpg');">
</div>
</div>
<header class="hero">
<div class="hero-center">
<h1 class="hero__logo" data-aos="zoom-in">
AOS
</h1>
<h2 class="hero__text" data-aos="fade-up" data-aos-delay="400" data-aos-easing="ease">
Animate On Scroll
<span>
Library
</span>
</h2>
</div>
<span class="hero__scroll" data-aos="fade-up" data-aos-delay="800" data-aos-easing="ease">
Scroll down
<br>
<i class="chevron bottom">
</i>
</span>
<a class="octocat" data-aos="zoom-out" data-aos-delay="1500" href="http://github.com/michalsnik/aos" target="_blank">
<img alt="" src="img/github_octocat.png">
</a>
</header>
<section class="section section--code">
<div class="container">
<h2 class="section-title">
Fade
</h2>
<div class="code code--small code--left" data-aos="fade-up">
<pre><code class="html"><div data-aos="fade-up"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="fade-down">
<pre><code><div data-aos="fade-down"></div></code></pre>
</div>
<div class="code code--small code--left" data-aos="fade-right">
<pre><code><div data-aos="fade-right"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="fade-left">
<pre><code><div data-aos="fade-left"></div></code></pre>
</div>
<div class="code code--small code--left" data-aos="fade-up-right">
<pre><code><div data-aos="fade-up-right"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="fade-up-left">
<pre><code><div data-aos="fade-up-left"></div></code></pre>
</div>
<div class="code code--small code--left" data-aos="fade-down-right">
<pre><code><div data-aos="fade-down-right"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="fade-down-left">
<pre><code><div data-aos="fade-down-left"></div></code></pre>
</div>
</div>
</section>
<section class="section section--code">
<div class="container">
<h2 class="section-title">
Flip
</h2>
<div class="code code--small code--left" data-aos="flip-left">
<pre><code><div data-aos="flip-left"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="flip-right">
<pre><code><div data-aos="flip-right"></div></code></pre>
</div>
<div class="code code--small code--left" data-aos="flip-up">
<pre><code><div data-aos="flip-up"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="flip-down">
<pre><code><div data-aos="flip-down"></div></code></pre>
</div>
</div>
</section>
<section class="section section--code">
<div class="container">
<h2 class="section-title">
Zoom
</h2>
<div class="code code--small code--left" data-aos="zoom-in">
<pre><code><div data-aos="zoom-in"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="zoom-in-up">
<pre><code><div data-aos="zoom-in-up"></div></code></pre>
</div>
<div class="code code--small code--left" data-aos="zoom-in-down">
<pre><code><div data-aos="zoom-in-down"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="zoom-in-left">
<pre><code><div data-aos="zoom-in-left"></div></code></pre>
</div>
<div class="code code--small code--left" data-aos="zoom-in-right">
<pre><code><div data-aos="zoom-in-right"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="zoom-out">
<pre><code><div data-aos="zoom-out"></div></code></pre>
</div>
<div class="code code--small code--left" data-aos="zoom-out-up">
<pre><code><div data-aos="zoom-out-up"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="zoom-out-down">
<pre><code><div data-aos="zoom-out-down"></div></code></pre>
</div>
<div class="code code--small code--left" data-aos="zoom-out-right">
<pre><code><div data-aos="zoom-out-right"></div></code></pre>
</div>
<div class="code code--small code--right" data-aos="zoom-out-left">
<pre><code><div data-aos="zoom-out-left"></div></code></pre>
</div>
</div>
</section>
<section class="section section--code">
<div class="container">
<h2 class="section-title">
Different settings examples
</h2>
<div class="code code--left" data-aos="fade-up" data-aos-duration="3000">
<pre><code><div data-aos="fade-up"
data-aos-duration="3000">
</div></code></pre>
</div>
<div class="code code--right" data-aos="fade-down" data-aos-duration="1500" data-aos-easing="linear">
<pre><code><div data-aos="fade-down"
data-aos-easing="linear"
data-aos-duration="1500">
</div></code></pre>
</div>
<div class="code code--left" data-aos="fade-right" data-aos-easing="ease-in-sine" data-aos-offset="300" id="example-anchor">
<pre><code><div data-aos="fade-right"
data-aos-offset="300"
data-aos-easing="ease-in-sine">
</div></code></pre>
</div>
<div class="code code--right" data-aos="fade-left" data-aos-anchor="#example-anchor" data-aos-duration="500" data-aos-offset="500">
<pre><code><div data-aos="fade-left"
data-aos-anchor="#example-anchor"
data-aos-offset="500"
data-aos-duration="500">
</div></code></pre>
</div>
<div class="code code--left" data-aos="fade-zoom-in" data-aos-delay="300" data-aos-easing="ease-in-back" data-aos-offset="0">
<pre><code><div data-aos="fade-zoom-in"
data-aos-easing="ease-in-back"
data-aos-delay="300"
data-aos-offset="0">
</div></code></pre>
</div>
<div class="code code--right" data-aos="flip-left" data-aos-duration="2000" data-aos-easing="ease-out-cubic">
<pre><code><div data-aos="flip-left"
data-aos-easing="ease-out-cubic"
data-aos-duration="2000">
</div></code></pre>
</div>
</div>
</section>
<section class="section section--code">
<div class="container">
<h2 class="section-title">
Anchor placement
</h2>
<div class="code code--wider code--left" data-aos="fade-up" data-aos-anchor-placement="top-bottom">
<pre><code><div data-aos="fade-up"
data-aos-anchor-placement="top-bottom">
</div></code></pre>
</div>
<div class="code code--wider code--right" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
<pre><code><div data-aos="fade-up"
data-aos-anchor-placement="center-bottom">
</div></code></pre>
</div>
<div class="code code--wider code--left" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
<pre><code><div data-aos="fade-up"
data-aos-anchor-placement="bottom-bottom">
</div></code></pre>
</div>
<div class="code code--wider code--right" data-aos="fade-up" data-aos-anchor-placement="top-center">
<pre><code><div data-aos="fade-up"
data-aos-anchor-placement="top-center">
</div></code></pre>
</div>
<div class="code code--wider code--left" data-aos="fade-up" data-aos-anchor-placement="center-center">
<pre><code><div data-aos="fade-up"
data-aos-anchor-placement="center-center">
</div></code></pre>
</div>
<div class="code code--wider code--right" data-aos="fade-up" data-aos-anchor-placement="bottom-center">
<pre><code><div data-aos="fade-up"
data-aos-anchor-placement="bottom-center">
</div></code></pre>
</div>
</div>
</section>
<section class="section section--more">
<div class="container">
<div class="section-group">
<h3>
Get it
</h3>
<a class="btn" href="https://github.com/michalsnik/aos/archive/master.zip">
<span>
Download
</span>
</a>
<a class="btn" href="https://github.com/michalsnik/aos" target="_blank">
<span>
View on github
</span>
</a>
</div>
<div class="section-group">
<h3>
Install using Yarn, Npm, Bower
</h3>
<pre><code>yarn add aos</code></pre>
<pre><code>npm install aos --save</code></pre>
<pre><code>bower install aos --save</code></pre>
</div>
<div class="section-group">
<h3>
CDN sources
</h3>
<h4>
CSS
</h4>
<pre><code><link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"></code></pre>
<h4>
JS
</h4>
<pre><code><script src="https://unpkg.com/[email protected]/dist/aos.js"></script></code></pre>
</div>
<div class="section-group">
<h3>
Initialize AOS
</h3>
<pre><code><script>
AOS.init();
</script></code></pre>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
</div>
</footer>
<script src="https://code.jquery.com/jquery-1.11.3.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.6/highlight.min.js">
</script>
<script src="https://unpkg.com/[email protected]/dist/aos.js">
</script>
<!-- <script src="http://localhost:3002/dist/aos.js"></script> -->
<script>
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>
<script>
hljs.initHighlightingOnLoad();
$('.hero__scroll').on('click', function(e) {
$('html, body').animate({
scrollTop: $(window).height()
}, 1200);
});
</script>
</body>
</html>