CSS3 动画插件 aos.js

╰半夏微凉° 2022-08-30 15:55 379阅读 0赞

> aos.js是一款效果超赞的页面滚动元素动画jQuery动画库插件。该动画库可以在页面滚动时提供28种不同的元素动画效果，以及多种easing效果。在页面往回滚动时，元素会恢复到原来的状态。

# 安装 #

yarn add aos@next

或者

npm install --save aos@next

import AOS from 'aos';
    import 'aos/dist/aos.css'; 
    AOS.init();

# 手动添加 #

文件下载地址：[https://download.csdn.net/download/admans/20398230][https_download.csdn.net_download_admans_20398230]

# 示例 #

如果你担心HTML5校验的问题，可以为上面的属性添加data-前缀。

# 参数说明 #

AOS.init({ 
      // 全局设置
      disable: false, // 禁用条件 'phone', 'tablet', 'mobile', boolean, 表达式 或 函数
      startEvent: 'DOMContentLoaded', // 初始化的事件名称
      initClassName: 'aos-init', 
      animatedClassName: 'aos-animate', 
      useClassNames: false, 
      disableMutationObserver: false, 
      debounceDelay: 50, // 调整窗口大小时为防止抖动延迟时间
      throttleDelay: 99, // 滚动页面时 延迟时间
      
      offset: 120, // 是立刻触发动画还是在指定时间之后触发动画
      delay: 0, // 动画的延迟时间
      duration: 400, // 动画持续时间
      easing: 'ease', // 动画的easing动画效果
      once: false, // 动画是否只会触发一次,或者每次上下滚动都会触发
      mirror: false, // 锚元素。使用它的偏移来取代实际元素的偏移来触发动画
      anchorPlacement: 'top-bottom', // 锚位置,触发动画时元素位于屏幕的位置
    
    });

# 动画及效果 #

Fade 动画:

*  fade
 *  fade-up
 *  fade-down
 *  fade-left
 *  fade-right
 *  fade-up-right
 *  fade-up-left
 *  fade-down-right
 *  fade-down-left

Flip 动画:

*  flip-up
 *  flip-down
 *  flip-left
 *  flip-right

Slide 动画:

*  slide-up
 *  slide-down
 *  slide-left
 *  slide-right
 *

Zoom 动画:

*  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

锚点位置:

*  top-bottom
 *  top-center
 *  top-top
 *  center-bottom
 *  center-center
 *  center-top
 *  bottom-bottom
 *  bottom-center
 *  bottom-top

Easing 效果:

*  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

项目Github地址：[https://github.com/michalsnik/aos][https_github.com_michalsnik_aos]

[https_download.csdn.net_download_admans_20398230]: https://download.csdn.net/download/admans/20398230
[https_github.com_michalsnik_aos]: https://github.com/michalsnik/aos