AOSAnimationinonepagewebsite
创始人
2024-09-03 08:00:55
0次

使用AOS插件实现网页中的滚动动画效果。

首先，在HTML头部引入相关的CSS和JS文件：

接着，在需要添加动画效果的元素中加入 data-aos="动画效果"，并设置相应的动画效果参数值：


  // 元素内容

其中 data-aos 属性指定动画效果名称，如 fade-up 表示从下往上渐变显示的动画效果； data-aos-duration 属性指定动画持续时间，单位为毫秒； data-aos-delay 属性指定动画延迟时间，单位为毫秒。

最后，在初始化时调用 AOS.init() 方法启用AOS插件：

完整示例代码如下：




  
  AOS Animation