视差滚动

图片视差滚动

// 这个elementList的元素内应该包含其他子元素
const elementList = *
      
gsap.registerPlugin(ScrollTrigger)

elementList.forEach((el)=>{
    gsap.fromTo(
        el,
        
        // 初始样式
        { backgroundPositionY: `-${windows.innerHeight / 2}px` }, // 使用视口高度的一半
        
        // 结束样式
        { backgroundPositionY: `${windows.innerHeight / 2}px`, ScrollTrigger:{
            trigger: el,
            scrub:true, // 关联滚动条
        } }
    )
})