CSS3 动画插件 aos.js

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

<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>AOS.init();
</script>

示例

<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="fade-in"></div>

  <divdata-aos="fade-up"data-aos-offset="200"data-aos-delay="50"data-aos-duration="1000"data-aos-easing="ease-in-out"data-aos-mirror="true"data-aos-once="false"data-aos-anchor-placement="top-center"></div>

参数说明

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', // 锚位置,触发动画时元素位于屏幕的位置});