GASP-ScrollTrigger js库使用 官网多屏滚动

3,102 阅读1分钟

ScrollTrigger-官网 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>

引用CDN或者下载js文件地址在上方 以下是demo 参数说明:

ScrollTrigger.create({
    trigger: '目标元素需要添加效果的盒子',
    start: 'top top', //触发效果的位置
    end: '+=800', '触发动画结束的位置'
    pin:'开启固定定位',
    //若是不清楚触发位置markers开启后可以标注
    //这个颜色可以自定义markers: {startColor: "green", endColor: "red", fontSize: "12px"},
    markers:true,
    animation:gsap.timeline().fromTo('需要处理的动画')//多个就.fromTo()多个
})