首页 >web前端 >css教程 >css3怎么实现页面滚动动画特效？

css3怎么实现页面滚动动画特效？

藏色散人原创: 2018-08-06 14:32:174533浏览

本篇文章主要介绍css3实现页面滚动动画特效。那么我们首页要认识一下，什么是AOS？AOS 是一个用于在页面滚动的时候呈现元素动画的工具库，你可能会觉得它和 WOWJS 一样，虽然他们的效果类似，但是AOS是 CSS3 动画驱动的库，当你滚动页面的时候能让元素动起来，当页面滚回顶部的时候，元素能够回到前一个状态，如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。希望本文介绍对大家有所帮助。

css3实现页面滚动动画特效具体代码示例如下：

首先要在页面中引入aos.css文件,jquery和aos.js文件

<link rel="stylesheet" href="aos.css" />
<script src="jquery.min.js">
</script><script src="aos.js"></script>

<body aos-easing="ease-out-back" aos-duration="1000" aos-delay="0">
<header class="hero">
    <div class="hero-center">
        <h1 style="font-family:Microsoft YaHei">页面滚动元素动画插件-aos.js</h1>
        <h2 class="hero__text aos-init" aos="fade-up" aos-easing="ease" aos-delay="400">Animate On Scroll <span>Library</span></h2>
    </div>
   <span class="hero__scroll aos-init" 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-init" aos="fade-up">
            <pre class="brush:php;toolbar:false"><code class="html">&lt;div aos="fade-up"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="fade-down"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="fade-right"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="fade-left"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="fade-up-right"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="fade-up-left"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="fade-down-right"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="fade-down-left"&gt;&lt;/div&gt;</code>

Flip

<code>&lt;div aos="flip-left"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="flip-right"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="flip-up"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="flip-down"&gt;&lt;/div&gt;</code>

Zoom

<code>&lt;div aos="zoom-in"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="zoom-in-up"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="zoom-in-down"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="zoom-in-left"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="zoom-in-right"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="zoom-out"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="zoom-out-up"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="zoom-out-down"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="zoom-out-right"&gt;&lt;/div&gt;</code>

<code>&lt;div aos="zoom-out-left"&gt;&lt;/div&gt;</code>

Different settings examples

<code>&lt;div aos="fade-up"
     aos-duration="3000"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="fade-down"
     aos-easing="linear"
     aos-duration="1500"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="fade-right"
     aos-offset="300"
     aos-easing="ease-in-sine"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="fade-left"
     aos-anchor="#example-anchor"
     aos-offset="500"
     aos-duration="500"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="fade-zoom-in"
     aos-easing="ease-in-back"
     aos-delay="300"
     aos-offset="0"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="flip-left"
     aos-easing="ease-out-cubic"
     aos-duration="2000"&gt;
&lt;/div&gt;</code>

Anchor placement

<code>&lt;div aos="fade-up"
     aos-anchor-placement="top-bottom"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="fade-up"
     aos-anchor-placement="center-bottom"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="fade-up"
     aos-anchor-placement="bottom-bottom"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="fade-up"
     aos-anchor-placement="top-center"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="fade-up"
     aos-anchor-placement="center-center"&gt;
&lt;/div&gt;</code>

<code>&lt;div aos="fade-up"
     aos-anchor-placement="bottom-center"&gt;
&lt;/div&gt;</code>

以上是css3怎么实现页面滚动动画特效？的详细内容。更多信息请关注PHP中文网其他相关文章！

jquery css css3 循环 JS

声明：

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn