开源工具，Github开源项目排行

搜索 TinyTools

AOS一个鼠标滚动页面的Javascript动画库

文档演示 Github仓库

AOS - Animate on scroll library

最新稳定版本 (v2) 请访问 此处

🚀 Demo

🌟 Codepen 示例

⚙ 安装

基础

在 <head> 中添加样式：

html 复制代码 
<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

在 </body> 结束标签前添加脚本，并初始化 AOS：

html 复制代码 
<script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script>
  AOS.init();
</script>

使用包管理器

安装 aos 包：

  • yarn add aos@next
  • 或 npm install --save aos@next

导入脚本、样式并初始化 AOS：

js 复制代码 
import AOS from 'aos';
import 'aos/dist/aos.css'; // 您也可以使用 <link> 来设置样式
// ..
AOS.init();

为了使其正常工作，您必须确保您的构建过程已配置样式加载器，并将其正确打包。
但是，如果您使用的是 Parcel，它将按提供的开箱即用。

🤔 如何使用？

1. 初始化 AOS：

js 复制代码 
AOS.init();

// 您还可以传递一个可选的设置对象
// 以下列出了默认设置
AOS.init({
  // 全局设置：
  disable: false, // 接受以下值：'phone'、'tablet'、'mobile'、布尔值、表达式或函数
  startEvent: 'DOMContentLoaded', // 在文档上分派的事件名称，AOS 应在此事件上进行初始化
  initClassName: 'aos-init', // 初始化后应用的类
  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', // 定义元素相对于窗口的哪个位置应该触发动画
});

2. 使用 data-aos 属性设置动画：

html 复制代码 
<div data-aos="fade-in"></div>

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

html 复制代码 
<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>

锚点

还有一个设置只能在每个元素上使用：

  • data-aos-anchor - 元素的偏移量将用于触发动画，而不是实际的偏移量。

示例：

html 复制代码 
<div data-aos="fade-up" data-aos-anchor=".other-element"></div>

这样，您可以在滚动到另一个元素时触发一个元素的动画 - 这在为固定元素设置动画时非常有用。

API

AOS 对象作为全局变量公开，目前有三种可用方法：

  • init - 初始化 AOS
  • refresh - 重新计算所有元素的偏移量和位置（窗口大小调整时调用）
  • refreshHard - 重新初始化包含 AOS 元素的数组并触发 refresh（与 aos 元素相关的 DOM 更改时调用）

示例执行：

javascript 复制代码 
AOS.refresh();

默认情况下，AOS 会监视 DOM 更改，如果有任何新元素异步加载或从 DOM 中删除，它会自动调用 refreshHard。在不支持 MutationObserver 的浏览器（例如 IE）中，您可能需要自行调用 AOS.refreshHard()。

refresh 方法会在窗口大小调整等操作时调用，因为它不需要使用 AOS 元素构建新的存储，并且应该尽可能轻量。

JS 事件

AOS 会在文档上触发两个事件：aos:in 和 aos:out，每当任何元素以动画方式进入或退出时，都会触发这两个事件，以便您可以在 JS 中执行其他操作：

js 复制代码 
document.addEventListener('aos:in', ({ detail }) => {
  console.log('animated in', detail);
});

document.addEventListener('aos:out', ({ detail }) => {
  console.log('animated out', detail);
});

您还可以通过设置 data-aos-id 属性，让 AOS 在特定元素上触发自定义事件：

html 复制代码 
<div data-aos="fade-in" data-aos-id="super-duper"></div>

然后，您将能够监听两个自定义事件：

  • aos:in:super-duper
  • aos:out:super-duper

技巧：

添加自定义动画：

有时内置动画不够用。假设您需要一个盒子根据分辨率显示不同的动画。
您可以这样做：

css 复制代码 
[data-aos="new-animation"] {
  opacity: 0;
  transition-property: transform, opacity;

  &.aos-animate {
    opacity: 1;
  }

  @media screen and (min-width: 768px) {
    transform: translateX(100px);

    &.aos-animate {
      transform: translateX(0);
    }
  }
}

Then use it in HTML:

html 复制代码 
<div data-aos="new-animation"></div>

该元素仅在移动设备上会以动画形式呈现不透明度，但从 768px 宽度开始，它也会从右向左滑动。

添加自定义缓动：

与动画类似，您可以添加自定义缓动：

css 复制代码 
[data-aos] {
  body[data-aos-easing="new-easing"] &,
  &[data-aos][data-aos-easing="new-easing"] {
    transition-timing-function: cubic-bezier(.250, .250, .750, .750);
  }
}

自定义默认动画距离

内置动画的默认距离为 100px。只要您使用 SCSS，就可以覆盖它：

css 复制代码 
$aos-distance: 200px; // 它必须位于导入语句上方
@import 'node_modules/aos/src/sass/aos.scss';

但是，您必须事先配置构建过程，以允许其从 node_modules 导入样式。

集成外部 CSS 动画库（例如 Animate.css）：

使用 animatedClassName 更改 AOS 的默认行为，以便在滚动时应用放置在 data-aos 中的类名。

html 复制代码 
<div data-aos="fadeInUp"></div>
js 复制代码 
AOS.init({
  useClassNames: true,
  initClassName: false,
  animatedClassName: 'animated',
});

上述元素将获得两个类：animated 和 fadeInUp。使用上述三个设置的不同组合，您应该能够集成任何外部 CSS 动画库。

然而，外部库并不太在意实际动画之前的状态。因此，如果您希望这些元素在滚动之前不可见，您可能需要添加类似的样式：

css 复制代码 
[data-aos] {
  visibility: hidden;
}
[data-aos].animated {
  visibility: visible;
}

注意事项：

设置：duration, delay

Duration 和 Delay 接受的值从 50 到 3000，步长为 50 毫秒，这是因为这些值由 CSS 处理，为了不让 CSS 比原有的更长，我只实现了其中的一部分。我相信这些应该可以满足大多数情况。

如果没有，您可以编写简单的 CSS 来添加另一个持续时间，例如：

css 复制代码 
  body[data-aos-duration='4000'] [data-aos],
  [data-aos][data-aos][data-aos-duration='4000'] {
    transition-duration: 4000ms;
  }

这段代码将添加 4000 毫秒的时长，可供您在 AOS 元素上设置，或在初始化 AOS 脚本时设置为全局时长。
请注意，重复使用 [data-aos][data-aos] —— 这不是错误，而是一个技巧，使单个设置比全局设置更重要，而无需在此处写入难看的 "!important" :)

示例用法：

html 复制代码 
<div data-aos="fade-in" data-aos-duration="4000"></div>

预定义选项

动画

  • 淡入淡出动画:

    • fade
    • 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 functions:

  • 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 贡献指南，并随时创建新问题。

关于项目

AOS一个鼠标滚动页面的Javascript动画库。
MIT
Javascript
27,948
2653
313
2015-07-10
2024-03-26

增长趋势 - stars