meface/aos.md at 69b97ea4da2f31a8bb348c9062940564877a5fed

5.9 KiB

Raw Blame History

title

date

author

页面滚动动画库(aos)

[aos的github地址] https://github.com/michalsnik/aos

安装

CDN 的方式

引用aos的样式文件

 <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

在body标签中添加aos库

<script src="https://unpkg.com/aos@next/dist/aos.js"></script>

npm 的方式

npm insatll aos

在入口文件main.js中引入AOS库

import AOS from 'aos';
import 'aos/dist/aos.css';

使用

1.初始化`AOS`

执行AOS.init(option)函数，AOS会在<body>元素中添加一些option配置项内容，通常配置页面整体的一些动画过渡属性和全局的配置。

AOS.init({
  // Global settings:
  disable: false, // 设置AOS禁用的条件: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // 初始化监听事件
  initClassName: 'aos-init', // 每个aos渲染的元素初始化的class样式，默认是‘aos-init’
  animatedClassName: 'aos-animate', // 每个aos渲染的元素的动态属性的样式
  useClassNames: false, //当为true时，进行或完成动画的元素的`data-aos`属性的值会添加到class属性中
  disableMutationObserver: false, // disables automatic mutations' detections (advanced)
  debounceDelay: 50, // the delay on debounce used while resizing window (advanced)
  throttleDelay: 99, // the delay on throttle used while scrolling the page (advanced)

  // Settings that can be overridden on per-element basis, by `data-aos-*` attributes:
  offset: 120, //初始触发点的(Y轴)偏移量(单位:px)
  delay: 0, // 动画的延迟时间，取值[0,3000]，步长50ms
  duration: 400, // 动画的持续时间，取值[0,3000], 步长50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // 动画是否只渲染一次
  mirror: false, // 当滚动经过元素时，是否应该将其动画化
  anchorPlacement: 'top-bottom', // 元素触发动画的位置

});

2.配置动画元素属性

 <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-mirror="true"
    data-aos-once="false"
    data-aos-anchor-placement="top-center"
  >
  </div>

属性	属性	属性	默认值
aos-offset	触发元素动画的位置在Y轴上的偏移量	200	120
aos-duration	动画持续时间	600	400
aos-easing	动画的easing动画效果	ease-in-sine	ease
aos-delay	动画的延迟时间	300	0
aos-anchor	锚元素。使用它的偏移来取代实际元素的偏移来触发动画	#selector	null
aos-anchor-placement	锚位置，触发动画时元素位于屏幕的位置	top-center	top-bottom
aos-once	动画是否只会触发一次，或者每次上下滚动都会触发	true	false

淡入淡出动画：

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

3.示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AOS示例</title>
<style>
* {
  box-sizing: border-box;
}
.item {
  width: 200px;
  height: 200px;
  margin: 50px auto;
  padding-top: 75px;
  background: #ccc;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}
</style>
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<body>
 	<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
    <script>
    AOS.init({
      duration: 1200,
    })
    </script>
	<div class="item" data-aos="fade-up">1</div>
    <div class="item" data-aos="fade-down">2</div>
    <div class="item" data-aos="fade-right">3</div>
    <div class="item" data-aos="fade-left">4</div>

    <div class="item" data-aos="zoom-in">5</div>
    <div class="item" data-aos="zoom-out">6</div>

    <div class="item" data-aos="slide-up">7</div>

    <div class="item" data-aos="flip-up">8</div>
    <div class="item" data-aos="flip-down">9</div>
    <div class="item" data-aos="flip-right">10</div>
    <div class="item" data-aos="flip-left">11</div>

</body>
</html>

参考文章

[1] aos.js超赞页面滚动元素动画jQuery动画库 https://www.jq22.com/jquery-info8150

[2] aos https://github.com/michalsnik/aos#animations

5.9 KiB Raw Blame History Unescape Escape