插件描述：aos.js知名网站建设定制是一款页面滚动元素动画库插件。知名网站建设定制该动画库可以在页面滚动时提供28知名网站建设定制种不同的元素动画效果，以及多种easing效果。知名网站建设定制在页面往回滚动时，知名网站建设定制元素会恢复到原来的状态。
1.引用
在html知名网站建设定制文件中引入css文件和js文件
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"><!--别忘了引入jQuery文件--><script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>- 1
- 2
- 3
- 4
- 5
2.页面中的使用
1.初始化AOS
<script> AOS.init(); //下面是一些默认配置 也可以说是不想单独为每一个元素做动画配置时，统一配置所有元素的动画效果 AOS.init({ // 全局配置: disable: false, // 禁用。可取值: 'phone'、'tablet'、'mobile'、布尔值、表达式或函数 startEvent: 'DOMContentLoaded', // AOS 应初始化在 document 上绑定的事件名 initClassName: 'aos-init', // 初始化后使用的 class 类 animatedClassName: 'aos-animate', // 动画 class useClassNames: false, // 值为 true，将添加滚动 `data-aos` 内容为 class disableMutationObserver: false, // disables automatic mutations' detections (高级) debounceDelay: 50, // 调整窗口大小时使用的 (高级) throttleDelay: 99, // 滚动页面时使用的延迟 (高级) // 通过 'data-aos-*' 属性在每个元素上重写配置: offset: 120, // 从原始触发点的偏移量 (px) delay: 0, // 取值范围 0-3000, 每多 1 加 50ms duration: 400, // 取值范围 0-3000, 每多 1 加 50ms easing: 'ease', // AOS 动画默认 easing once: false, // 向下滑动时，动画只发生一次 mirror: false, // 滚动到元素上方时是否应设置动画 anchorPlacement: 'top-bottom', // 定义与窗口有关的元素的哪个位置应触发动画 //以下两个为额外配置 //AOS被禁用的条件 //可以传入三种设备类型：mobile、phone、tablet //也可以自己设置禁用条件，比如window.innerWidth < 1024 屏幕小于1024像素时禁用 //也可以传入一个函数，返回true或者false disable:false, //AOS被初始化的事件名称 //如果不想滚动动画从页面加载(DOMContentLoaded)后就开始执行，可以使用这个来设置，AOS会在document上监听这事件 startEvent:DOMContentLoaded, });</script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
2.使用data-aos属性设置动画(在标签中的使用)
<!--fade-in是动画名字，使用哪个写哪个即可，在页面滚动时，会在该元素上触发相应的动画--><!--data前缀是为HTML5校验的问题--><div data-aos="fade-in"></div><!--使用data-aos-*来调整--><div data-aos="fade-up" data-aos-offset="200" data-aos-delay="50" data-aos-duration="1000" data-aos-easing="ease-in-out" data-aos-once="false" data-aos-anchor-placement="top-center"> 这里对上述属性做一个解释： aos-offset：是立刻触发动画还是在指定时间之后触发动画 aos-delay：动画延迟的时间 aos-duration：动画持续时间 aos-easing：动画的easing动画效果 aos-once：动画是否只会触发一次，或者每次上下滚动都会触发 aos-anchor-placement：锚位置，触发动画时元素位于屏幕的位置</div><!--还有一个只能用在每个元素基础上的配置属性：锚点--><div data-aos="fade-up" data-aos-anchor=".other-element"></div><!--这样可以在滚动到另一个元素时触发某一元素动画，对固定位置元素挺有用的-->- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
3.API(使AOS对象成为全局变量的三种方式)
AOS.init()//初始化AOS.refresh()//重新计算元素的所有偏移量和位置(在窗口调整大小时使用)AOS.refreshHard()//使用AOS元素和触发器重新初始化数组refresh(调整与DOM变化相关的aos元素)- 1
- 2
- 3
4.自定义动画
添加自定义动画
可以自定义自己需要的动画。
例：根据分辨率不同在一个盒子里需要两种不同的动画
1.在js中自定义动画
[data-aos="new-animation"] { opacity: 0; transition-property: transform, opacity; &.aos-animate { opacity: 1; } @media screen and (min-width: 768px) { transform: translateX(100px); &.aos-animate { transform: translateX(0); } }}- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
2.在html中使用
<div data-aos="new-animation"></div>- 1
此时该元素只为移动端的opacity设置动画，从768px开始该元素也会从右向左滑动
添加自定义easing
[data-aos] { body[data-aos-easing="new-easing"] &, &[data-aos][data-aos-easing="new-easing"] { transition-timing-function: cubic-bezier(.250, .250, .750, .750); }}- 1
- 2
- 3
- 4
- 5
- 6
5.注意事项
设置：duration，delay
/*添加css 增加持续时间*/ body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000'] { transition-duration: 4000ms; }- 1
- 2
- 3
- 4
- 5
上述代码将添加4000ms的duration时间，可供在AOS元素上设置，或在初始化AOS脚本时设置为全局duration时间。
注：[data-aos][data-aos]并不是语法错误，这是一种技巧，可以使单个配置比全局配置更重要，就不需要标明!important
<div data-aos="fade-in" data-aos-duration="4000"></div>- 1
3.动画、easings效果点击
对AOS.js插件的使用做一次记录