特效描述：css3页面滚动 aos.js插件 元素动画，css3页面滚动aos.js插件元素动画
代码结构
1. 引入CSS
<link rel="stylesheet" type="text/css" href="css/normalize.css" /> <link rel="stylesheet" type="text/css" href="css/demo.css"> <link rel="stylesheet" href="dist/aos.css" /> <link rel="stylesheet" href="css/styles.css" />
2. 引入JS
<script type="text/javascript" src="js/jquery.1.7.1.min.js"></script> <script type="text/javascript" src="dist/aos.js"></script>
3. HTML代码
<header class="hero">
<div class="hero-center">
<h1 style="font-family:Microsoft YaHei">页面滚动元素动画插件-aos.js</h1>
<h2 class="hero__text" aos="fade-up" aos-easing="ease" aos-delay="400">Animate On Scroll <span>Library</span></h2>
</div>
<span class="hero__scroll" aos="fade-up" aos-easing="ease" aos-delay="800">
Scroll down <br>
<i class="chevron bottom"></i>
</span>
</header>
<section class="section section--code">
<div class="container">
<h2 class="section-title">Fade</h2>
<div class="code code--small code--left" aos="fade-up">
<pre><code class="html"><div aos="fade-up"></div></code></pre>
</div>
<div class="code code--small code--right" aos="fade-down">
<pre><code><div aos="fade-down"></div></code></pre>
</div>
<div class="code code--small code--left" aos="fade-right">
<pre><code><div aos="fade-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="fade-left">
<pre><code><div aos="fade-left"></div></code></pre>
</div>
<div class="code code--small code--left" aos="fade-up-right">
<pre><code><div aos="fade-up-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="fade-up-left">
<pre><code><div aos="fade-up-left"></div></code></pre>
</div>
<div class="code code--small code--left" aos="fade-down-right">
<pre><code><div aos="fade-down-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="fade-down-left">
<pre><code><div 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" aos="flip-left">
<pre><code><div aos="flip-left"></div></code></pre>
</div>
<div class="code code--small code--right" aos="flip-right">
<pre><code><div aos="flip-right"></div></code></pre>
</div>
<div class="code code--small code--left" aos="flip-up">
<pre><code><div aos="flip-up"></div></code></pre>
</div>
<div class="code code--small code--right" aos="flip-down">
<pre><code><div 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" aos="zoom-in">
<pre><code><div aos="zoom-in"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-in-up">
<pre><code><div aos="zoom-in-up"></div></code></pre>
</div>
<div class="code code--small code--left" aos="zoom-in-down">
<pre><code><div aos="zoom-in-down"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-in-left">
<pre><code><div aos="zoom-in-left"></div></code></pre>
</div>
<div class="code code--small code--left" aos="zoom-in-right">
<pre><code><div aos="zoom-in-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-out">
<pre><code><div aos="zoom-out"></div></code></pre>
</div>
<div class="code code--small code--left" aos="zoom-out-up">
<pre><code><div aos="zoom-out-up"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-out-down">
<pre><code><div aos="zoom-out-down"></div></code></pre>
</div>
<div class="code code--small code--left" aos="zoom-out-right">
<pre><code><div aos="zoom-out-right"></div></code></pre>
</div>
<div class="code code--small code--right" aos="zoom-out-left">
<pre><code><div 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" aos="fade-up" aos-duration="3000">
<pre><code><div aos="fade-up" aos-duration="3000"> </div></code></pre>
</div>
<div class="code code--right" aos="fade-down" aos-easing="linear" aos-duration="1500">
<pre><code><div aos="fade-down" aos-easing="linear" aos-duration="1500"> </div></code></pre>
</div>
<div id="example-anchor" class="code code--left" aos="fade-right" aos-offset="300" aos-easing="ease-in-sine">
<pre><code><div aos="fade-right" aos-offset="300" aos-easing="ease-in-sine"> </div></code></pre>
</div>
<div class="code code--right" aos="fade-left" aos-anchor="#example-anchor" aos-offset="500" aos-duration="500">
<pre><code><div aos="fade-left" aos-anchor="#example-anchor" aos-offset="500" aos-duration="500"> </div></code></pre>
</div>
<div class="code code--left" aos="fade-zoom-in" aos-easing="ease-in-back" aos-delay="300" aos-offset="0">
<pre><code><div aos="fade-zoom-in" aos-easing="ease-in-back" aos-delay="300" aos-offset="0"> </div></code></pre>
</div>
<div class="code code--right" aos="flip-left" aos-easing="ease-out-cubic" aos-duration="2000">
<pre><code><div aos="flip-left" aos-easing="ease-out-cubic" 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" aos="fade-up" aos-anchor-placement="top-bottom">
<pre><code><div aos="fade-up" aos-anchor-placement="top-bottom"> </div></code></pre>
</div>
<div class="code code--wider code--right" aos="fade-up" aos-anchor-placement="center-bottom">
<pre><code><div aos="fade-up" aos-anchor-placement="center-bottom"> </div></code></pre>
</div>
<div class="code code--wider code--left" aos="fade-up" aos-anchor-placement="bottom-bottom">
<pre><code><div aos="fade-up" aos-anchor-placement="bottom-bottom"> </div></code></pre>
</div>
<div class="code code--wider code--right" aos="fade-up" aos-anchor-placement="top-center">
<pre><code><div aos="fade-up" aos-anchor-placement="top-center"> </div></code></pre>
</div>
<div class="code code--wider code--left" aos="fade-up" aos-anchor-placement="center-center">
<pre><code><div aos="fade-up" aos-anchor-placement="center-center"> </div></code></pre>
</div>
<div class="code code--wider code--right" aos="fade-up" aos-anchor-placement="bottom-center">
<pre><code><div aos="fade-up" aos-anchor-placement="bottom-center"> </div></code></pre>
</div>
</div>
</section>
<script type="text/javascript">
AOS.init({
easing: 'ease-out-back',
duration: 1000
});
</script>
<script>
$('.hero__scroll').on('click', function(e) {
$('html, body').animate({
scrollTop: $(window).height()
}, 1200);
});
</script>
