跳过主要内容

.effects

.effects( targets:String | Element | Array, config:Object | null ) : Array

添加应由 ScrollSmoother 管理的视差元素。

参数

  • targets: 字符串 | 元素 | 数组

    应该应用效果的目标元素。您可以使用类似的选择器文本".box"或者使用一个元素引用或元素数组。

  • config: 对象 | null

    一个配置对象,可以包含speed和/或lag类似于{speed: 1, lag: 0.3}的属性。如果省略,ScrollSmoother 将只使用每个元素的data-speed或者data-lag属性值。像 GSAP 中大多数地方一样,也接受基于函数的值。

返回值 : 数组

一个 ScrollTrigger 实例数组,用于处理这些效果

细节

添加speed或者滞后效果到提供的目标上。使用 "speed" 来实现视差效果。可以把“lag”想象成让元素懒惰一些,允许它从正常的滚动位置漂移出来,并花费一定时间来“赶上”。您可以为附近的不同元素分配略微不同的滞后时间,从而在滚动时产生一种非常令人愉悦的错落有致的效果。如果您设置了effects: trueScrollSmoother.create()配置中,它将自动查找具有data-lag属性的元素并应用对应的效果,或者您也可以通过此函数使用 JavaScript 应用这些效果:

let smoother = ScrollSmoother.create(...);

// use the data-speed and data-lag attributes found on each .box element
smoother.effects(".box");

// or specify values:
smoother.effects(".circle", {speed: 0.9, lag: 0.3});

您可以通过将其效果设置为默认值来移除效果,例如:

// remove effects by setting back to defaults
smoother.effects(".box", { speed: 1, lag: 0 });

当某个效果应用于一个元素时,ScrollSmoother 只会创建一个ScrollTrigger实例来管理该效果,并返回包含这些 ScrollTrigger 实例的数组。因此,如果您对 5 个元素应用了 "speed" 效果,则返回的数组将包含 5 个 ScrollTrigger 实例。您也可以通过作为 getter 使用此方法获取所有效果的数组:

// returns an Array of all the ScrollTrigger instances that are managing the effects
let effects = smoother.effects(); // getter

// kill all the effects:
smoother.effects().forEach((t) => t.kill());

"auto" 速度

当你将速度设置为"auto"时,它会计算其父容器中在最大间隙方向(向上或向下)可移动的距离。因此它非常适合视差效果——只需让子元素比父元素更大,将其对齐到你想要的位置(通常是顶部边缘与容器顶部对齐,或底部边缘与容器底部对齐),然后让 ScrollSmoother 发挥魔法。当然,在父元素上设置overflow: hidden以便裁剪子元素。

您甚至可以使用基于函数的值让事情更加动态:

smoother.effects(".box", {
speed: (index, element) => 0.5 + index * 0.1,
lag: (index, element) => 0.3 + index * 0.05,
});

这些基于函数的值将在每次调用ScrollTrigger.refresh()时刷新。

data-speed 对齐

请注意,这些元素将在视口的中心处到达其“自然”位置。下面是来自@snorkltv:

加载中...