AOS–让网页更加生动,网页滚动动画效果

介绍

AOS是一个用在网页滚动中的动画库,顾名思义,AOS是随着滚动条而伴随的网页动画效果,AOS非常有效的使某些长网页更加的生动和丰富,对于提升网页整体质量具备了促进作用。


让网页更加生动,网页滚动动画效果——AOS

Github

14.9k stars,可见使用的人还是非常多的

https://github.com/michalsnik/aos

使用方式

下载好相应的js和css文件

 <link rel="stylesheet" href="./dist/aos.css" />
 <script src="./dist/aos.js">script>
  <script>
    AOS.init();
  script>

或者使用包管理工具

  • yarn add aos@next
  • or npm install –save aos@next
import AOS from \'aos\';
import \'aos/dist/aos.css\'; 

AOS.init();
  • 具体使用

最简单的就是

AOS.init();

或者也可以自行配置一些选项

AOS.init({
  // 全局配置:
  disable: false, // 接受以下值:“phone”、“tablet”、“mobile”、boolean、expression或function
  startEvent: \'DOMContentLoaded\', // 在document上调度的事件的名称,AOS应在该事件上初始化
  initClassName: \'aos-init\', // 初始化后应用的class
  animatedClassName: \'aos-animate\', // 动画类名称
  useClassNames: false, //如果为true,将在滚动时将“data aos”的内容添加为类
  disableMutationObserver: false, // 禁用自动突变检测(高级)
  debounceDelay: 50, // 调整窗口大小时使用的解除抖动延迟(高级)
  throttleDelay: 99, // 滚动页面时使用的节流延迟(高级)
  

  // 可以按每个元素重写的设置,按`data aos-*`属性:
  offset: 120, // 从原始触发点偏移(px)
  delay: 0, // 值从0到3000,步长为50ms
  duration: 400, // 值从0到3000,步长为50ms
  easing: \'ease\', // AOS动画的默认缓和
  once: false, // 动画是否只应发生一次(向下滚动时)
  mirror: false, // 当元素滚动过去时是否应该动画化
  anchorPlacement: \'top-bottom\', //定义元素相对于窗口的哪个位置应触发动画

});

使用data-aos属性设置动画:

  <div data-aos="fade-in">div>

并使用data-aos-*属性调整行为:

data-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” >

动画效果如下:

让网页更加生动,网页滚动动画效果——AOS

动图演示

让网页更加生动,网页滚动动画效果——AOS

内容出处:,

声明:本网站所收集的部分公开资料来源于互联网,转载的目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。如果您发现网站上有侵犯您的知识产权的作品,请与我们取得联系,我们会及时修改或删除。文章链接:http://www.yixao.com/share/17437.html

发表评论

登录后才能评论