sound_ai/src/views/home/components/ParallaxBackground.vue

<template>
  <div ref="containerRef" class="fixed inset-0 overflow-hidden">
    
    <Motion
      class="absolute inset-0 bg-cover bg-no-repeat"
      :style="backgroundStyle"
    />

    <div
      class="absolute inset-0 bg-gradient-to-b from-c via-transparent to-white z-0"
    />
  </div>
</template>
<script setup lang="ts">
import { useScroll, useTransform, Motion } from 'motion-v';
import { ref, computed } from 'vue';
import bg2 from '@/assets/imgs/home/bg2.png';

defineOptions({
  name: 'ParallaxBackground',
});

// 内容容器
const containerRef = ref<HTMLElement | null>(null);

// 滚动监听，监控整个文档的滚动
const { scrollYProgress } = useScroll({
  offset: ['start start', 'end start'],
});

// 视差效果 - 大幅增加位移距离，向上移动
const parallaxY = useTransform(
  scrollYProgress,
  [0, 1],
  ['0%', '-50%'], // 增大位移距离到50%
);

// 背景图样式
const backgroundStyle = computed(() => ({
  backgroundImage: `url(${bg2})`,
  y: parallaxY,
  backgroundPosition: 'center top',
  backgroundSize: 'cover',
  height: '140%', // 图片高度超过容器
}));
</script>
<style lang="scss" scoped></style>