aat.js是一款滚动监测动画插件-BFW插件库

aat.js是一款滚动监测动画插件

aat.js 是一个帮助你在滚动时创建任何你想象的动画的工具。你只需要知道这两个函数：`ScrollObserver.Container()` 和 `ScrollObserver.Element()`。

第一个函数是为了基于容器的滚动位置（默认为页面的根元素）创建动画效果，比如基于页面位置更新进度条。

第二个函数是为了基于特定元素在视口中的滚动位置创建动画效果，比如当元素从视口底部向上移动时，增加其大小。

安装

你可以使用NPM安装：

npm install aatjs

然后导入它：

import { ScrollObserver } from 'aat'

或者将它作为`<script>`包含在你的页面中：

然后使用它：

const ScrollObserver = aat.ScrollObserver

仅提供百分比

滚动时的动画效果只是根据滚动位置更新元素的样式。滚动位置表示为你在视口中的位置百分比。

对于`ScrollObserver.Container()`，它会返回页面（或特定容器）中你所处位置的百分比。当你在页面顶部时，百分比为`0`。当你在页面底部时，百分比为`1`。这意味着值从`0`到`1`。例如，当你在页面中间时，百分比为`0.5`。

对于`ScrollObserver.Element()`，它会返回指定元素在视口中的滚动位置的百分比。如果该元素在视口下方，则该值为`0`。如果该元素在视口上方，则该值为`1`。一旦该元素进入视口，该值将根据其位置从`0`到`1`变化。

注意:`ScrollObserver.Element()` 中元素的位置是基于其左上角点。换句话说，如果元素的顶部`1px`进入视口，则百分比值将大于`0`。

示例

让我们看一些如何使用这两个函数的示例。

`ScrollObserver.Container(container?)`

在这个示例中，我们有一个进度条，我们要根据页面的滚动位置更新它。

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/aat.min.js"></script>

    <style>
        .progress {
position: fixed;
top: 0;
left: 0;
transform-origin: 0 0;
background-color: red;
height: 10px;
width: 100%;
}
.long-content{
    height: 1400px;
}
    </style>
</head>

<body>


    <div class="progress"></div>
    <div class="long-content">向下滚动试试</div>

    <script>
        const { ScrollObserver, valueAtPercentage } = aat;
    
    const progress = document.querySelector('.progress')
    
    ScrollObserver.Container().onScroll(({ percentageY, percentageX }) => {
    progress.style.transform = `scaleX(${percentageY})`
    })
    </script>

</body>

</html>

注意：`percentageY` 是用于垂直滚动，而 `percentageX` 是用于水平滚动。

在这种情况下，容器是整个页面。你可以通过将其传递给 `Container` 函数来更改为特定容器。

const section = document.querySelector('.section')

ScrollObserver.Container(section).onScroll(({ percentageY, percentageX }) => {})

还可以监测element对象

`ScrollObserver.Element(element, options)`

`valueAtPercentage` 接受一个包含四个属性的对象：

`from`: 要从中进行动画的初始值。

`to`: 要进行动画的目标值。

`percentage`: 当前滚动百分比值。

`unit`: 如果你的值有像 `px` 这样的单位，则可以使用此属性。默认为空字符串。

更改元素的容器

对于 `ScrollObserver.Element()`，默认容器是页面的根元素。如果你想使用不同的容器，请将 `container` 选项设置为所需内容。

const section = document.querySelector('.section')
ScrollObserver.Element(box, { container: section })

更改元素的起始点和结束点

起始点是视口中我们启动元素进入时开始动画的点。默认情况下，在视口底部（对应百分比为“0”）。

结束点是元素达到其动画最终状态的点。例如，如果我们将不透明度从“0”增加到“1”，则为“1”。换句话说，百分比值将为“1”。水平滚动也是如此。水平滚动的起始点位于视口最右侧，结束点位于视口最左侧。

你可以使用以下属性在选项中更新这些值：

- `offsetTop`: 将结束点向下移动所提供像素数量。

- `offsetBottom`: 将起始点向上移动所提供像素数量。

- `offsetLeft`: 将结束点向右移动所提供像素数量。

- `offsetRight`: 将起始点向左移动所提供像素数量。

例如：

ScrollObserver.Element(box, {
offsetTop: 10, // 将结束点向下移动10px（垂直滚动）
offsetBottom: 20, // 将起始点向上移动20px（垂直滚动）
offsetLeft: 10, // 将结束点向右移动10px（水平滚动）
offsetRight: 20 // 将起始点向左移动20px（水平滚动）
})

aat.js是一款滚动监测动画插件

网友评论0

xRoll.js

gototop.js

bfwscroll.js

parallax.js

pushIn.js

wow.js

jquery.tiltedpage-scroll.js

ScrollMagic.min.js

jquery.mousewheel.js

perfect-scrollbar.js