建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

页面滚动的时候呈现元素动画的工具库AOS

来源:易助科技浏览量:89收藏

简介


AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,它是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部的时候,元素能够回到前一个状态,如此达到循环动画的效果。aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果,以及多种easing效果。在页面往回滚动时,元素会恢复到原来的状态。


基本属性:


AttributeDescriptionExample valueDefault value
data-aos-offset更改偏移量以迟早触发动画,单位是
 px,但是不用写!直接传入数值即可。
200120
data-aos-duration动画持续时间 (ms)600400
data-aos-easing缓动函数以不同的方式移动元素ease-in-sineease
data-aos-delay动画延迟 (ms)3000
data-aos-anchor锚元素,其偏移量将被计数以触发动画,而不是实际的元素偏移量#selectornull
data-aos-anchor-placement锚的位置-当指定锚元素出现在屏幕上时触发动画top-centertop-bottom
data-aos-once设置动画是否只触发一次,若为 false
 则每次向上/向下滚动到元素时都会重复触发动画
TRUEFALSE



使用


1. 引入或安装


安装,如下图所示:


AOS动画库-安装示例图


页面引用,在页面中引入aos.css文件,jquery和aos.js文件:


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


2. HTML


对需要添加动画的元素增加 AOS 的相关属性(attribute),格式为:


<div data-aos="animation_name"></div>


其中的 animation_name 为动画名。例如:


<div class="displayBox" data-aos="zoom-in">
  <p>Animated element using zoom-in.</p>
</div>


这就完成了一个基础的动画,用于在元素进入视图时应用缩放动画。即当用户滚动到包含 data-aos="zoom-in" 属性的元素时,AOS 库会自动为该元素添加缩放动画。


aos脚本将会在页面滚动时,在该元素上触发相应的动画。在元素上还可以添加以下一些属性:


<div aos="fade-zoom-in" aos-offset="200" aos-easing="ease-in-sine" aos-duration="600">
  <div aos="flip-left" aos-delay="100" aos-anchor=".example-selector">
    <div aos="fade-up" aos-anchor-placement="top-center">
      如果你担心HTML5校验的问题,可以为上面的属性添加data-前缀:
      <div data-aos="animation_name" data-aos-offset="200" data-aos-easing="ease-in-sine"></div>
    </div>
  </div>
</div>


注意,aos-duration的动画持续时间的范围从50-3000毫秒,如果你想设置更大的值,可以在页面中添加下面的CSS代码:


body[aos-duration='4000'] [aos], [aos][aos][aos-duration='4000']{ transition-duration: 4000ms; }
.contents img{width:100%}


全局设置:


当然也可以在全局对上述属性设置一些通用属性,需要在 AOS 初始化时进行定义:


<script>
    AOS.init({
      offset: 200,
      duration: 600,
      easing: 'ease-in-sine',
      delay: 100,
    });
  </script>


动画样式:


在 AOS 中,这些动画样式是通过 HTML 属性 data-aos 来指定的,用于在元素进入视图时添加动画效果。以下是每个动画样式的简要说明:


淡入淡出动画:

fade:元素逐渐变为不透明,创建一个平滑的淡入效果。
fade-up:元素从底部逐渐淡入,创建一个从下往上的淡入效果。
fade-down:元素从顶部逐渐淡入,创建一个从上往下的淡入效果。
fade-left:元素从右侧逐渐淡入,创建一个从右往左的淡入效果。
fade-right:元素从左侧逐渐淡入,创建一个从左往右的淡入效果。
fade-up-right:元素从右下角逐渐淡入,创建一个从右下角往上的淡入效果。
fade-up-left:元素从左下角逐渐淡入,创建一个从左下角往上的淡入效果。
fade-down-right:元素从右上角逐渐淡入,创建一个从右上角往下的淡入效果。
fade-down-left:元素从左上角逐渐淡入,创建一个从左上角往下的淡入效果。

翻转动画:

flip-up:元素从下方翻转进入视图。
flip-down:元素从上方翻转进入视图。
flip-left:元素从右侧翻转进入视图。
flip-right:元素从左侧翻转进入视图。

滑动动画:

slide-up:元素从底部滑入视图。
slide-down:元素从顶部滑入视图。
slide-left:元素从右侧滑入视图。
slide-right:元素从左侧滑入视图。

缩放动画:

zoom-in:元素逐渐放大进入视图。
zoom-in-up:元素从底部放大进入视图。
zoom-in-down:元素从顶部放大进入视图。
zoom-in-left:元素从右侧放大进入视图。
zoom-in-right:元素从左侧放大进入视图。
zoom-out:元素逐渐缩小进入视图。
zoom-out-up:元素从底部缩小进入视图。
zoom-out-down:元素从顶部缩小进入视图。
zoom-out-left:元素从右侧缩小进入视图。
zoom-out-right:元素从左侧缩小进入视图。


锚点位置:


在 AOS(Animate On Scroll)中,锚元素位置指的是在页面中特定元素的位置,用于触发 AOS 库中的动画效果。AOS 库允许使用各种锚元素位置来触发动画效果,包括:

top-bottom:当元素的顶部进入视图时触发动画。

top-center:当元素的中心进入视图时触发动画。

top-top:当元素的顶部完全进入视图时触发动画。

center-bottom:当元素的底部进入视图时触发动画。

center-center:当元素的中心完全进入视图时触发动画。

center-top:当元素的顶部与视图的顶部对齐时触发动画。

bottom-bottom:当元素的底部完全进入视图时触发动画。

bottom-center:当元素的底部与视图的中心对齐时触发动画。

bottom-top:当元素的底部与视图的顶部对齐时触发动画。


这些锚元素位置可以在 AOS 的 HTML 属性中指定,例如:


<div data-aos="fade-up" data-aos-anchor="bottom-top">...</div>


缓动函数:


Easing functions(缓动函数)是用于动画和过渡效果中的数学函数,用于控制动画的速度和变化率。在动画中,物体通常不是匀速移动的,而是随着时间的推移逐渐加速或减速。这种变化的速度和程度可以通过缓动函数来控制,从而使动画看起来更加自然流畅。使用缓动函数可以使动画看起来更加自然和舒适,为用户提供更好的用户体验。


linear:匀速缓动函数,动画的速度保持恒定。
ease:默认缓动函数,动画开始时加速,然后逐渐减速。
ease-in:加速缓动函数,动画开始时缓慢,然后加速到最后。
ease-out:减速缓动函数,动画开始时快速,然后逐渐减速到最后。
ease-in-out:先加速后减速缓动函数,动画开始时缓慢,然后加速到一半,然后逐渐减速到最后。
ease-in-back:带回弹效果的加速缓动函数,动画开始时缓慢,然后加速到最后,并在结尾处产生回弹效果。
ease-out-back:带回弹效果的减速缓动函数,动画开始时快速,然后逐渐减速到最后,并在结尾处产生回弹效果。
ease-in-out-back:带回弹效果的先加速后减速缓动函数,动画开始时缓慢,然后加速到一半,然后逐渐减速到最后,并在结尾处产生回弹效果。
ease-in-sine:正弦加速缓动函数,动画开始时缓慢,然后逐渐加速到最后。
ease-out-sine:正弦减速缓动函数,动画开始时快速,然后逐渐减速到最后。
ease-in-out-sine:正弦先加速后减速缓动函数,动画开始时缓慢,然后加速到一半,然后逐渐减速到最后。
ease-in-quad:二次方加速缓动函数,动画开始时缓慢,然后逐渐加速到最后。
ease-out-quad:二次方减速缓动函数,动画开始时快速,然后逐渐减速到最后。
ease-in-out-quad:二次方先加速后减速缓动函数,动画开始时缓慢,然后加速到一半,然后逐渐减速到最后。
ease-in-cubic:三次方加速缓动函数,动画开始时缓慢,然后逐渐加速到最后。
ease-out-cubic:三次方减速缓动函数,动画开始时快速,然后逐渐减速到最后。
ease-in-out-cubic:三次方先加速后减速缓动函数,动画开始时缓慢,然后加速到一半,然后逐渐减速到最后。
ease-in-quart:四次方加速缓动函数,动画开始时缓慢,然后逐渐加速到最后。
ease-out-quart:四次方减速缓动函数,动画开始时快速,然后逐渐减速到最后。
ease-in-out-quart:四次方先加速后减速缓动函数,动画开始时缓慢,然后加速到一半,然后逐渐减速到最后。



相关链接


效果演示 :  https://www.xyhtml5.com/examples/aos/

GitHub 地址 :  https://github.com/aos

npm 地址 :  https://www.npmjs.com/package/aos