简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > css教程 > 正文

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

藏色散人
发布： 2018-08-06 14:32:17
原创
4502 人浏览过

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

9a6fb61c4f09c8080d28028458f2a2e.png

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>
<script> $(&#39;.hero__scroll&#39;).on(&#39;click&#39;, function(e) { $(&#39;html, body&#39;).animate({ scrollTop: $(window).height() }, 1200); }); </script>
登录后复制

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

相关标签：
css3实现页面滚动动画
来源：php.cn
上一篇：多列布局的概念是什么？CSS多列布局的应用（实例代码） 下一篇：如何实现单行文字向上滚动的效果（附代码）
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
降低滚动背景图像的不透明度，限制最小不透明度 我试图让背景图像减少滚动时的不透明度，一旦离开登陆页面，使用vanillajavascript将其降至最低0.5。我尝试在滚动函数中添加Math.max()使其仅降至0.5，但它会...
来自于 2024-04-04 23:50:53
0
1
1329
如何使文本在单击时变成新元素（如分隔线）？ 我正在尝试找到一种方法，使页面上的某些文本在单击时变成分隔符/新元素。我不知道如何解释它，但是就像，想象一个下面带有标题的图像-单击标题，然后上面的图像变得像一个文本框/不同的图像...
来自于 2024-04-04 11:21:03
0
1
3580
Vanilla JS setTimeout()：识别错误行为 我的汉堡式菜单上有一个用HTML、CSS和VanillaJavaScript编写的动画。预期结果当您单击汉堡菜单按钮时，应该发生以下事件：单击汉堡菜单图标时：main旋转180°并...
来自于 2024-04-02 20:44:40
0
1
284
选择事件改变时，CSS动画触发相应效果 我正在尝试制作一个React应用程序，现在我有一个选择输入框，里面有一些宝可梦，我需要做的是每当选择改变（即宝可梦改变）时，宝可梦精灵会进行一个小的摇晃动画。目前我只有一个改变的精...
来自于 2024-04-01 09:16:28
0
1
350
为什么每次保存我的vite react项目时，会向页面主体添加新的canvas元素，而不是替换现有的canvas元素？ 我正在尝试开始学习ThreeJs（我也是JavascriptWeb开发的新手）。看了一些教程后，我从vite和react开始，然后从基本的旋转立方体开始。该部分有效。但是根据我所读...
来自于 2024-03-30 09:57:49
0
1
396
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！