Showing source for: https://michalsnik.github.io/aos/
Duration: 0.11138s
Server: GitHub.com

<!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">&lt;div data-aos="fade-up"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="fade-down">
                    <pre><code>&lt;div data-aos="fade-down"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--left" data-aos="fade-right">
                    <pre><code>&lt;div data-aos="fade-right"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="fade-left">
                    <pre><code>&lt;div data-aos="fade-left"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--left" data-aos="fade-up-right">
                    <pre><code>&lt;div data-aos="fade-up-right"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="fade-up-left">
                    <pre><code>&lt;div data-aos="fade-up-left"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--left" data-aos="fade-down-right">
                    <pre><code>&lt;div data-aos="fade-down-right"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="fade-down-left">
                    <pre><code>&lt;div data-aos="fade-down-left"&gt;&lt;/div&gt;</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>&lt;div data-aos="flip-left"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="flip-right">
                    <pre><code>&lt;div data-aos="flip-right"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--left" data-aos="flip-up">
                    <pre><code>&lt;div data-aos="flip-up"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="flip-down">
                    <pre><code>&lt;div data-aos="flip-down"&gt;&lt;/div&gt;</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>&lt;div data-aos="zoom-in"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="zoom-in-up">
                    <pre><code>&lt;div data-aos="zoom-in-up"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--left" data-aos="zoom-in-down">
                    <pre><code>&lt;div data-aos="zoom-in-down"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="zoom-in-left">
                    <pre><code>&lt;div data-aos="zoom-in-left"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--left" data-aos="zoom-in-right">
                    <pre><code>&lt;div data-aos="zoom-in-right"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="zoom-out">
                    <pre><code>&lt;div data-aos="zoom-out"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--left" data-aos="zoom-out-up">
                    <pre><code>&lt;div data-aos="zoom-out-up"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="zoom-out-down">
                    <pre><code>&lt;div data-aos="zoom-out-down"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--left" data-aos="zoom-out-right">
                    <pre><code>&lt;div data-aos="zoom-out-right"&gt;&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--small code--right" data-aos="zoom-out-left">
                    <pre><code>&lt;div data-aos="zoom-out-left"&gt;&lt;/div&gt;</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>&lt;div data-aos="fade-up"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-duration="3000"&gt;
&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--right" data-aos="fade-down" data-aos-duration="1500" data-aos-easing="linear">
                    <pre><code>&lt;div data-aos="fade-down"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-easing="linear"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-duration="1500"&gt;
&lt;/div&gt;</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>&lt;div data-aos="fade-right"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-offset="300"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-easing="ease-in-sine"&gt;
&lt;/div&gt;</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>&lt;div data-aos="fade-left"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-anchor="#example-anchor"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-offset="500"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-duration="500"&gt;
&lt;/div&gt;</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>&lt;div data-aos="fade-zoom-in"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-easing="ease-in-back"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-delay="300"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-offset="0"&gt;
&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--right" data-aos="flip-left" data-aos-duration="2000" data-aos-easing="ease-out-cubic">
                    <pre><code>&lt;div data-aos="flip-left"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-easing="ease-out-cubic"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-duration="2000"&gt;
&lt;/div&gt;</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>&lt;div data-aos="fade-up"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-anchor-placement="top-bottom"&gt;
&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--wider code--right" data-aos="fade-up" data-aos-anchor-placement="center-bottom">
                    <pre><code>&lt;div data-aos="fade-up"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-anchor-placement="center-bottom"&gt;
&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--wider code--left" data-aos="fade-up" data-aos-anchor-placement="bottom-bottom">
                    <pre><code>&lt;div data-aos="fade-up"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-anchor-placement="bottom-bottom"&gt;
&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--wider code--right" data-aos="fade-up" data-aos-anchor-placement="top-center">
                    <pre><code>&lt;div data-aos="fade-up"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-anchor-placement="top-center"&gt;
&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--wider code--left" data-aos="fade-up" data-aos-anchor-placement="center-center">
                    <pre><code>&lt;div data-aos="fade-up"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-anchor-placement="center-center"&gt;
&lt;/div&gt;</code></pre>
                </div>
                <div class="code code--wider code--right" data-aos="fade-up" data-aos-anchor-placement="bottom-center">
                    <pre><code>&lt;div data-aos="fade-up"
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data-aos-anchor-placement="bottom-center"&gt;
&lt;/div&gt;</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>&lt;link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet"&gt;</code></pre>
                    <h4>
                        JS
                    </h4>
                    <pre><code>&lt;script src="https://unpkg.com/[email protected]/dist/aos.js"&gt;&lt;/script&gt;</code></pre>
                </div>
                <div class="section-group">
                    <h3>
                        Initialize AOS
                    </h3>
                    <pre><code>&lt;script&gt;
&nbsp;&nbsp;AOS.init();
&lt;/script&gt;</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>

Latest requests

# Url Url Source Date
1 https://michalsnik.github.io/aos/ 2022-06-26 05:38:49
2 https://accounts.google.com/v3/sig… 2022-06-26 05:38:23
3 https://consent.youtube.com/ml?con… 2022-06-26 05:38:00
4 https://accounts.google.com/v3/sig… 2022-06-26 05:37:23
5 https://www.youtube.com/user/Geogr… 2022-06-26 05:36:31
6 https://consent.youtube.com/ml?con… 2022-06-26 05:34:57
7 https://www.amazon.de/review/revie… 2022-06-26 05:34:23
8 https://www.gogapless.com/crawley-… 2022-06-26 05:34:03
9 https://missmoss.neocities.org/int… 2022-06-26 05:32:41
10 https://consent.youtube.com/ml?con… 2022-06-26 05:30:39
11 https://notices.x10hosting.com/sus… 2022-06-26 05:30:16
12 https://consent.youtube.com/ml?con… 2022-06-26 05:30:14
13 https://consent.youtube.com/ml?con… 2022-06-26 05:28:24
14 http://ww1.maniacz.club/?subid1=75… 2022-06-26 05:27:15
15 https://accounts.google.com/v3/sig… 2022-06-26 05:26:55
16 https://accounts.google.com/v3/sig… 2022-06-26 05:25:11
17 http://ww16.dizim.org/?sub1=202103… 2022-06-26 05:25:06
18 https://ghost.org/ 2022-06-26 05:23:53
19 https://temp.cool/ 2022-06-26 05:22:04
20 https://ibdevelopers.net/hello-wor… 2022-06-26 05:22:00