数值
通过传递数值,定义从目标和容器顶部的偏移量。
如果未定义单位,则值被解释为像素。
接受
类型 | 示例 | 描述 |
---|---|---|
数字 | 100 |
距目标或容器顶部 100px |
单位 | '1rem' |
距目标或容器顶部 1rem |
百分比 | '10%' |
目标或容器高度的 10%,从目标或容器顶部算起 |
默认单位
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',
// -48px from the top of the target, 80px from the top of the container
enter: '80 -48',
// 250% from the top of the target, 67.5% from the top of the container
leave: '67.5% 250%',
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>