视口单位
标题
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
起始和结束位置
标题
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
多个停止位置
标题
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
停止位置
标题
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
目标
标题
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
开始和结束
缓动
颜色
标题
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
滤镜
标题
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
SVG 描边
JavaScript 选项
| 选项 | 值 | 默认值 | 描述 |
|---|---|---|---|
easing |
数值 | 1 | 滚动期间的动画缓动效果。 |
target |
CSS 选择器 | false | 动画持续时间的元素尺寸参考。 |
start |
长度 | 0 | 起始偏移量。该值可以使用 vh、% 和 px 单位。它支持基本的数学运算符 + 和 -。默认值 `0` 表示目标元素的上边框与视口的下边框相交。 |
end |
长度 | 0 | 结束偏移量。该值可以使用 vh、% 和 px 单位。它支持基本的数学运算符 + 和 -。默认值 `0` 表示目标元素的下边框与视口的上边框相交。 |
media |
布尔值, 数值, 字符串 | false | 活动状态的条件 - 宽度为整数（例如 640）或断点（例如 @s, @m, @l, @xl）。 |
动画属性
您可以通过使用逗号分隔的值列表来定义多个动画停止位置。（例如 x: 0,50,150）。停止位置可以由值和位置定义。如果您未指定停止位置，它将放置在前一个停止位置和后一个停止位置的中间。
| 选项 | 默认单位 | 描述 |
|---|---|---|
x |
px |
动画 translateX。 |
y |
px |
动画 translateY。 |
bgy |
px |
动画背景图像（y 轴）。 |
bgx |
px |
动画背景图像（x 轴）。 |
rotate |
deg |
顺时针旋转动画。 |
scale |
动画缩放。 | |
color |
动画颜色（需要起始值和结束值）。 | |
background-color |
动画背景颜色（需要起始值和结束值）。 | |
border-color |
动画边框颜色（需要起始值和结束值）。 | |
opacity |
动画透明度。 | |
blur |
px |
动画模糊滤镜。 |
hue |
deg |
动画色相旋转滤镜。 |
grayscale |
% |
动画灰度滤镜。 |
invert |
% |
动画反转滤镜。 |
saturate |
% |
动画饱和度滤镜。 |
sepia |
% |
动画褐色滤镜。 |
stroke |
动画 SVG 图像内的描边。 |