aos.js超赞页面滚动元素动画jQuery动画库.pdfVIP

aos.js超赞页⾯滚动元素动画jQuery动画库 查看演⽰ website 下载地址：https://github .com/michalsnik/aos 插件描述：aos.j s是⼀款效果超赞的页⾯滚动元素动画j Query动画库插 件。该动画库 以在页⾯滚动时提供28种不同的元素动画效果，以及多 种easing效果。在页⾯往回滚动时，元素会恢复到原来的状态。 简要教程 aos.j s是⼀款效果超赞的页⾯滚动元素动画j Query动画库插件。该动画库 以在页⾯滚 动时提供28种不同的元素动画效果，以及多种easing效果。在页⾯往回滚动时，元素 会恢复到原来的状态。 安装 以通过bower来安装aos动画库插件。 bower install aos --save 使⽤⽅法 在页⾯中引⼊aos.css⽂件,jquery和aos.j s⽂件 link rel=stylesheet href=dist/aos.css / script src=js/jquery .min.js/script script src=dist/aos.js/script HTML结构 要使⽤aos动画库，你需要做的就是在需要动画的元素上添加aos属性，例如： div aos=animation name aos脚本将会在页⾯滚动时，在该元素上触发相应的动画。 在元素上还 以添加以下⼀些属性： 属性 属性 属性 默认值 aos-offset 是⽴刻触发动画还是在指定时间之后 2 12 触发动画 aos-duration 动画持续时间 6 4 aos-easing 动画的easing动画效果 ease-in-sine ease aos-delay 动画的延迟时间 3 aos-anchor 锚元素。使⽤它的偏移来取代实际元 #selector null 素的偏移来触发动画 aos-anchor- 锚位置，触发动画时元素位于屏幕的 top-center top-bottom placement 位置 aos-once 动画是否只会触发⼀次，或者每次上 true false 下滚动都会触发 注意，aos-duration的动画持续时间的范围从5 -3 毫秒，如果你想设置更⼤的值， 以在页⾯中添加下⾯的CSS代码： body[aos-duration=4000] [aos], [aos][aos][aos-duration=4000]{ transition-duration: 4000ms; } 上⾯的代码将动画的持续时间修改为4 毫秒。 ⽰例代码： div aos=fade-zoom-in aos-offset=200 aos-easing=ease-in-sine 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-easi 全局配置 如果你不想单独每个元素做⼀个动画配置，你 以通过init()⽅法来统⼀配置所有元素 的动画效果。 AOS.init({ offset: 200, duration: 600, easing: ease-in-sine, delay : 100, }); 外配置 AOS提供了2个额外的配置⽅法，这些⽅法只能够在初始化时使⽤。