使用AOS.js页面滚动动画

官网有示例：https://michalsnik.github.io/aos/

使用

常用的选项：

offset：动画开始的位置相对于可视窗口底部的偏移量（默认为 120）

duration：动画持续时间（默认为 400）

easing：动画缓动函数（默认为 ease）

delay：动画延迟时间（默认为 0）

html

<head>
  <link rel="stylesheet" href="https://www.861ppt.com/cdn/aos.css">
</head>
<body>
    
    <div class="title aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">合作伙伴 PARTNER</div>
    <div class="des aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">诚|信</div>
    <div class="content aos-init aos-animate" data-aos="fade-up" data-aos-delay="300"></div>
    
  <script src="https://www.861ppt.com/cdn/aos.js"></script>
  <script>
  AOS.init({
    offset: 100,
    duration: 500,
    easing: 'ease-in-out',
    delay: 100
  });
  </script>
</body>

<head>
  <link rel="stylesheet" href="https://www.861ppt.com/cdn/aos.css">
</head>
<body>
    
    <div class="title aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">合作伙伴 PARTNER</div>
    <div class="des aos-init aos-animate" data-aos="fade-up" data-aos-delay="200">诚|信</div>
    <div class="content aos-init aos-animate" data-aos="fade-up" data-aos-delay="300"></div>
    
  <script src="https://www.861ppt.com/cdn/aos.js"></script>
  <script>
  AOS.init({
    offset: 100,
    duration: 500,
    easing: 'ease-in-out',
    delay: 100
  });
  </script>
</body>

动画属性

淡入淡出动画：

fade-up
fade-down
fade-left
fade-right
fade-up-right
fade-up-left
fade-down-right
fade-down-left

翻转动画：

flip-up
flip-down
flip-left
flip-right

滑动动画：

slide-up
slide-down
slide-left
slide-right

缩放动画：

zoom-in
zoom-in-up
zoom-in-down
zoom-in-left
zoom-in-right
zoom-out
zoom-out-up
zoom-out-down
zoom-out-left
zoom-out-right

锚位置

top-bottom
top-center
top-top
center-bottom
center-center
center-top
bottom-bottom
bottom-center
bottom-top

easing动画

你可以使用以下的一些easing动画效果：

linear
ease
ease-in
ease-out
ease-in-out
ease-in-back
ease-out-back
ease-in-out-back
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-quad
ease-out-quad
ease-in-out-quad
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-quart
ease-out-quart
ease-in-out-quart

使用AOS.js页面滚动动画 ​

使用 ​

动画属性 ​

使用AOS.js页面滚动动画

使用

动画属性