使用vue3+gsap库+scss实现视差滚动效果

<template>
  <div class="app">
    <div v-for="(text, index) in texts" :key="index" class="item" :class="`bg-${index + 1}`">
      {{ text }}
    </div>
  </div>
</template>

<script setup>
import { onMounted } from 'vue';
import { gsap } from 'gsap';  // npm install gsap
import ScrollTrigger from 'gsap/ScrollTrigger';

const texts = [
  "我不是不想努力，是床和我签了长期合约。",
  "万事开头难，但再难也得开头。",
  "今天不努力，明天努力找工作。",
  "风很温柔，阳光很暖，我决定躺一天。"
];

gsap.registerPlugin(ScrollTrigger);

onMounted(() => {
  const items = document.querySelectorAll('.item');
  items.forEach(item => {
    gsap.fromTo(
      item,
      { backgroundPositionY: `-${window.innerHeight / 2}px` },
      {
        backgroundPositionY: `${window.innerHeight / 2}px`,
        ease: 'none',
        scrollTrigger: {
          trigger: item,
          start: 'top bottom',
          end: 'bottom top',
          scrub: true
        }
      }
    );
  });
});
</script>



<style lang="scss" scoped>
.app {
  .item {
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
  }

  // 使用同一个图，可按需替换不同图
  @for $i from 1 through 4 {
    .bg-#{$i} {
      background-image: url("https://picsum.photos/seed/#{$i}/1920/1080");
    }
  }
}
</style>