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

问题描述

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

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

我尝试了各种嵌套 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,但较小的图像并没有产生明显更好的结果。

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

提前致谢! 西蒙

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)