.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: