javascript - 如何在react中实现平滑的响应式视差效果？

Question

我的任务是为一个网站创建一个登陆页面。我将使用 React，现在最重要的事情之一是视差效果。当页面首次加载时，顶部有导航栏(透明背景)，但更重要的是标题、副标题和图片看起来像在背景中。一旦用户开始向下滚动，就会出现视差效果，基本上它会缩小图片并将其转换到右侧，而左侧旁边的图像就会出现。举一个视觉示例，它类似于https://pitch.com/除了第二张图片之外的着陆页看起来更加独立，而不是看起来像图片的一部分。

我想知道如何实现这一点，我开始尝试将第一张图像放在背景中，但是存在一些问题，例如我无法将图片完美地放入背景中，因为没有为背景设置 src -img，但我认为更好的方法是将两个图像作为一个图像，并且以某种方式在页面加载时将其放大到第一张图片，以便当用户滚动时，图像会缩放并平移到右侧？我使用检查元素查看了音高的代码，我认为这似乎就是他们正在做的事情？这是最好的方法吗？从 React 的实现 Angular 来看，我是否会在图像组件内为 usersscroll 添加一个事件监听器，然后传入 App.jsx 中的一个函数来处理该问题？

Answer 1

你可以查看react-spring，在这里查看他们的示例: https://www.react-spring.io/docs/hooks/examples

根据您的描述，您应该考虑将鼠标滚动插入到图像的变换属性中。