来写一个gsap的视差滚动效果

 gsap是一个很齐全的动画效果包

官网文档地址为：ScrollTrigger | GSAP | Docs & Learning

在使用gsap是要先进行安装：

cnpm install gsap scrolltrigger --save

<template>
    <div class="main" id="main">
        <section v-for="(item, index) in sections" :key="index" :id="'imgname' + item" :class="'imgname-' + item"></section>
    </div>
</template>
<script setup>
import { onMounted } from 'vue';
import gsap from 'gsap'
import ScrollTrigger from 'gsap/ScrollTrigger'

import url from './img/1.png'
const sections = [
    "1", "2", "3", "4", "5"
]
const List = []

onMounted(() => {
    // console.log(document.getElementById('main'));
    for (var i = 1; i <= sections.length; i++) {
        console.log('imgname' + i);
        const section = document.getElementById('imgname' + i)
        List.push(section)
    }

    gsap.registerPlugin(ScrollTrigger);
    List.forEach(item =>{
        gsap.fromTo(item,{
            backgroundPositionY:`-${window.innerHeight/2}px`
        },{
            backgroundPositionY:`${window.innerHeight/2}px`,
            // duration:3,
            ease:"none",//匀速
            // repeat:-1,//无限循环
            yoyo:true,//往返运动
            // delay:0.5
            scrollTrigger:{
                // 滚动动画，根据鼠标移动滚动
                trigger:item,//动画触发的元素
                // start:"top bottom",//动画开始的位置
                // end:"bottom top",
                // ！！！！！
                // 要注意这里要换成你包裹图片的dom的class名称或者id
                // 否则会报错！！
                scroller:".el-main",//设置滚动条为el-main，
                scrub:true,//鼠标移动滚动
                markers:true,//显示动画的标记
                // pin:true
            }
        })
    })
})

</script>
<style lang="scss">
$url: (
    "1",
    "2",
    "3",
    "4",
    "5"
);

.main {
    background-color: white;
    width: 100%;
    height: auto;
    border-radius: 4px;
    padding: 25px;
}

@for $i from 1 to length($url)+1 {
    .imgname-#{$i} {
        width: 100%;
        height: 860px;
        // background: $color[#{$i}];
        background: url('./img/#{$i}.png');
        background-size: 100% 860px;
        background-repeat: no-repeat;
    }
}

.imgname {
    width: 100%;
    height: 860px;
}

.imgname0 {

    /* background: url('./img/1.png'); */
    background: red;
}
</style>