跳到主要内容

页面滚动元素动画 Aos.js

6 分钟阅读

概述​

滚动时为页面上的元素设置动画的小型库。

Github 示例

开始​

🌟 示例​

👉 为了更好地理解这实际上是如何工作的，我鼓励您查看 关于 CSS-tricks 的帖子。

⚙ 安装​

基本的​

在中添加样式<head>：

  <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>
  <script>
    AOS.init();
  </script>

使用包管理器​

安装 aos 包：

yarn add aos@next
# or
npm install --save aos@next

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

import AOS from 'aos';
import 'aos/dist/aos.css'; // You can also use <link> for styles
// ..
AOS.init();

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

🤔 如何使用它？​

1. 初始化AOS：​

AOS.init();

// You can also pass an optional settings object
// below listed default settings
AOS.init({
  // Global settings:
  disable: false, // accepts following values: 'phone', 'tablet', 'mobile', boolean, expression or function
  startEvent: 'DOMContentLoaded', // name of the event dispatched on the document, that AOS should initialize on
  initClassName: 'aos-init', // class applied after initialization
  animatedClassName: 'aos-animate', // class applied on animation
  useClassNames: false, // if true, will add content of `data-aos` as classes on scroll
  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, // offset (in px) from the original trigger point
  delay: 0, // values from 0 to 3000, with step 50ms
  duration: 400, // values from 0 to 3000, with step 50ms
  easing: 'ease', // default easing for AOS animations
  once: false, // whether animation should happen only once - while scrolling down
  mirror: false, // whether elements should animate out while scrolling past them
  anchorPlacement: 'top-bottom', // defines which position of the element regarding to window should trigger the animation

});

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

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

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

  <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- 其偏移量将用于触发动画而不是实际动画的元素。

例子：

<div data-aos="fade-up" data-aos-anchor=".other-element"></div>

通过这种方式，您可以在一个元素上触发动画，同时滚动到另一个元素 - 这对于为固定元素设置动画很有用。

应用程序接口​

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

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

执行示例：

AOS.refresh();

默认情况下，AOS 正在监视 DOM 更改，如果有任何异步加载的新元素，或者当某些内容从 DOM 中删除时，它会refreshHard自动调用。IE等不支持的浏览器MutationObserver可能需要AOS.refreshHard()自己调用。

refresh方法在调整窗口大小等时被调用，因为它不需要使用 AOS 元素构建新商店并且应该尽可能轻。

JS事件​

aos:in AOS 在 document: 和 aos:out 任何元素动画进出时调度两个事件，以便您可以在 JS 中做额外的事情：

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

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

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

<div data-aos="fade-in" data-aos-id="super-duper"></div>

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

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

秘诀：​

添加自定义动画：​

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

[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);
    }
  }
}

然后在 HTML 中使用它：

<div data-aos="new-animation"></div>

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

添加自定义缓动：​

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

[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，就可以覆盖它：

$aos-distance: 200px; // It has to be above import
@import 'node_modules/aos/src/sass/aos.scss';

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

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

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

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

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

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

[data-aos] {
  visibility: hidden;
}
[data-aos].animated {
  visibility: visible;
}

注意事项：​

设置：duration,delay​

持续时间和延迟接受从 50 到 3000 的值，步长为 50 毫秒，这是因为它们是由 css 处理的，并且为了不使 css 比它已经存在的时间更长，我只实现了一个子集。我相信这些应该涵盖大多数情况。

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

  body[data-aos-duration='4000'] [data-aos],
  [data-aos][data-aos][data-aos-duration='4000'] {
    transition-duration: 4000ms;
  }

此代码将添加 4000 毫秒持续时间，供您在 AOS 元素上设置，或在初始化 AOS 脚本时设置为全局持续时间。请注意 double [data-aos][data-aos]- 这不是一个错误，它是一个技巧，使个人设置比全局设置更重要，而不需要在那里写丑陋的“！重要”:)

用法示例：

  <div data-aos="fade-in" data-aos-duration="4000"></div>
评论
0条评论

添加新评论

昵称
邮箱
网址
0%