数值
通过传递数值定义目标和容器顶部的偏移量。
如果未定义单位,则数值将被解释为像素。
接受
| 类型 | 示例 | 描述 |
|---|---|---|
| 数字 | 100 |
100px from the top of the target or container |
| 单位 | '1rem' |
1rem from the top of the target or container |
| 百分比 | '10%' |
10% of the target or container height, from the top of the target or container |
默认单位
px
数值示例代码
import { animate, onScroll } from 'animejs';
animate('.square', {
x: '15rem',
rotate: '1turn',
duration: 2000,
alternate: true,
loop: true,
ease: 'inOutQuad',
autoplay: onScroll({
container: '.scroll-container',
// 80% from the top of the container, -50px from the top of the target
enter: '80% 20%',
// 50px from the top of the container, 100px from the top of the target
leave: '50 -25',
debug: true
})
});
<div class="scroll-container scroll-y">
<div class="scroll-content grid square-grid">
<div class="scroll-section padded">
<div class="large centered row">
<div class="label">scroll down</div>
</div>
</div>
<div class="scroll-section padded">
<div class="large row">
<div class="square"></div>
</div>
</div>
<div class="scroll-section">
</div>
</div>
</div>