调试
显示标记以更好地可视化 enter(进入)和 leave(离开)阈值数值。
每个 ScrollObserver 实例都有其专属的颜色。
标尺的左侧表示容器阈值,右侧表示目标阈值数值。
接受
布尔值
默认值
false
调试代码示例
import { animate, onScroll } from 'animejs';
animate('.square', {
x: '15rem',
rotate: '1turn',
duration: 2000,
alternate: true,
loop: true,
ease: 'inOutQuad',
autoplay: onScroll({
container: '.scroll-container',
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 padded">
<div class="large centered row">
<div class="label">scroll up</div>
</div>
</div>
</div>
</div>