0

概述

为了优化我的网络应用程序，我正在从标准img标签过渡到 Next 的Image标签。虽然它对性能很有帮助，但让它做自定义效果和样式可能会令人沮丧。

问题

我正在尝试向 Next 添加视差效果Image。我以前能够添加视差库，但似乎没有与Image标签集成。

有没有办法在滚动到下一张图像时添加简单的视差效果？

我的尝试

  1. 我尝试将动态 translateY 样式属性添加到Image标签本身，但浏览器似乎没有读取字符串插值。
<Image
  src={url}
  height={450}
  width={1080}
  layout="responsive"
  className="object-cover"
  style={{transform: 'translateY(${offset / 2}px)'}}
/>

这是您可以查看的 repl.it链接。

4

1 回答 1

1

这很有趣，因为没有返回 ref，但是您可以为其分配一个className并访问该元素，这是一种方法

通过文档：

以 className 定位图像，而不是基于 DOM 结构

无论使用哪种布局模式，Image 组件都将具有一致的 DOM 结构，即一个标签被一个标签包裹。对于某些模式，它也可能有一个用于间距的兄弟。这些附加元素对于允许组件防止布局变化至关重要。

为内部设置样式的推荐方法是将 Image 组件上的 className 属性设置为导入的 CSS 模块的值。className 的值将自动应用于底层元素。

我使用了一个流行的微型视差库rellax，并将图像传递给它。

https://codesandbox.io/s/next-import-svg-forked-37i7h?file=/pages/index.js&resolutionWidth=320&resolutionHeight=675

您可以在此处查看结果 - https://37i7h.sse.codesandbox.io/ - 这不是完整的视差显示，但您可以看到库正确地将翻译参数应用于 img。

于 2022-01-20T23:28:53.243 回答