vue3中有什么npm能让上面的代码简单点吗

在 Vue3 中，可以使用一个名为 `vue-parallax-js` 的 npm 包来实现视差效果，它提供了一个 `<VueParallaxJs>` 组件来方便地实现视差效果。你可以使用以下命令来安装：

npm install vue-parallax-js --save

然后在你的组件中引入该组件，并传入所需的参数即可。以下是示例代码：

<template>
  <VueParallaxJs
    class="parallax"
    :strength="20"
    :mouse-move-range-x="30"
    :mouse-move-range-y="30"
  >
    <img
      class="parallax__img"
      src="./your-image.jpg"
      alt="Your Image"
    >
  </VueParallaxJs>
</template>

<script>
import VueParallaxJs from 'vue-parallax-js';

export default {
  components: {
    VueParallaxJs,
  },
};
</script>

<style scoped>
.parallax__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>

在上面的代码中，我们使用了一个 `<VueParallaxJs>` 组件来实现视差效果，并传入了 `strength`、`mouse-move-range-x` 和 `mouse-move-range-y` 等参数来控制视差效果的强度和范围。其中，`strength` 参数表示最大移动距离，`mouse-move-range-x` 和 `mouse-move-range-y` 参数分别表示鼠标在 x 和 y 方向上的移动范围。你可以根据需要调整这些参数。