Nuxt：如何结合滚动显示和视差

如何解决Nuxt：如何结合滚动显示和视差

我想知道如何为我的 nuxt 应用程序最好地结合 Scroll-Reveal 和 Jarallax（或任何其他视差）插件。我将两者都作为插件包含在内，它们单独运行良好。

如果我尝试让带有滚动显示的元素也包含视差元素，则显示的初始动画非常笨拙/块状，一点也不流畅。滚动显示动画后，视差效果很好。

我尝试了各种嵌套 div 的方法，有和没有“仅限客户端”。

我得到了最好的结果，但它仍然滞后：

<template>
  <div>
    <client-only>
      <div v-scroll-reveal>
        <div>
          <div class="jarallax">
            <img class="jarallax-img" />
          </div>
        </div>
      </div>
    </client-only>
  </div>
</template>

我有两个插件的默认设置。 图像大约 300kb，但较小的图像并没有产生明显更好的结果。

有没有办法实现流畅的动画？我做错了什么吗？

提前致谢！ 西蒙