.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: true在ScrollSmoother.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: