数值

通过传递数值,定义从目标和容器顶部的偏移量。
如果未定义单位,则值被解释为像素。

接受

类型 示例 描述
数字 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>