特效描述: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>