我使用 GSAP ScrollTrigger 制作图像的垂直滑块。这个想法是,带有 id=scroller 的隐藏元素需要一定的高度(我选择它为 400 vh),而所有内容都处于固定位置,当您向下滚动 #scroller 元素时,滚动触发器会垂直移动滑块,每次滑块的元素x进入某个区域主背景变为x背景
我有一个滚动触发器,可以为滑块设置动画:
gsap.to('#slider',{
scrollTrigger:{
trigger: "#scroller",
start: 0,
scrub: 1,
snap:"labelsDirectional"
},
y:-sliderH*6-80,
})
还有另一个根据滑块位置改变背景的触发器
let elems=document.querySelectorAll('.slider-elem')
let heroBacks=document.querySelectorAll('.hero-back')
elems=Array.from(elems)
ScrollTrigger.batch(elems, {
onLeave: (elements, triggers) => {
gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 0})
},
onEnterBack: (elements, triggers) => {
x=gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 1})
console.log(x)
},
start:'top 60%',
end:'bottom 10%',
markers:true
});
当我向下滚动时,一切正常,除了滑块元素的真实边框(顶部底部)和标记中指示的边框之间存在差异之外
解决方案是添加一个scrollTrigger.refresh()来更新start,end值并将其分配给onEnter回调,这样就变成了:
let elems=document.querySelectorAll('.slider-elem')
elems=Array.from(elems)
ScrollTrigger.batch(elems, {
onLeave: (elements, triggers) => {
gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 0})
},
onEnter:(elems,trigs)=>{
for(trig of trigs){
trig.refresh()
}
},
onEnterBack: (elements, triggers) => {
x=gsap.to(heroBacks[heroBacks.length-elems.indexOf(elements[0])-1], { opacity: 1})
},
start:'top 60%',
end:'bottom 10%',
markers:true
});