【问题标题】：Creating a parallax affect with react-scroll-parallax and image masks使用 react-scroll-parallax 和图像蒙版创建视差效果
【发布时间】：2022-10-25 16:30:55
【问题描述】：

这是我希望通过使用react-scroll-parallax 滚动来实现的预期结果。

在移动浏览器上

描述

我想创建一个具有上述视差效果的网站。关键元素是一个包含三个页面的网站。

从第 1 页滚动到第 2 页时，我希望移动设备模拟在屏幕的一半开始（以避免第 1 页的其他内容），然后移动到基本居中。

从第 2 页滚动到第 3 页时，网站和组件会粘住并再次像正常的网站滚动一样。

此外，在从第 1 页滚动到第 2 页期间，我希望设备模拟内的内容也滚动。

我试过的

对于初学者来说，通过使用设置了 z-index 和绝对位置的 div 以及 -50, 125 的 translateY 上的视差，我几乎可以得到我想要的效果。

<div className={"absolute z-10 w-full"}>
    <Parallax translateY={[-50, 125]}></Parallax>
</div>

然而，当我想在 div 中放置内容时，问题就出现了。在视差中设置另一个 div 也设置了 z-index 似乎会影响视差效果。

重要笔记

设备模拟内的内容

我发现一个棘手的问题是试图将内容放在设备模拟中。我希望设备模拟本身和其中的内容都有视差。

我不完全确定应该如何裁剪设备模拟中的内容。如果您想尝试一下，可以在这里找到设备模拟 svg 框架和设备模拟掩码 Device mock svg and mask

我尝试了具有各种 z 索引的 imgs，使用图像背景用 svg 掩码掩盖 div。没有什么能比得上更理想的结果。

设备模拟的缩放

我想确保这在移动设备和浏览器上都能正常工作。话虽如此，我试图使用边距来缩放设备模拟，但我很难尝试正确地让蒙版适用于模拟中的内容。

我不确定使用专用的宽度和高度尺寸是否是理想的选择，但非常愿意接受建议！似乎很难正确缩放设备框架和蒙版。

设备视差和设备内容视差

我希望设备模拟中的内容是 html，以便我可以更改它而不仅仅是图像。话虽如此，我想要的最重要的功能是让设备和里面的内容都具有视差滚动效果。

概括

我知道这对于一个快速简单的堆栈溢出问题来说有点多，但我一直在努力让它工作，但似乎无法正确确定这些小细节。我真诚地感谢所有帮助和建议，如果还有什么我可以提供的，请告诉我！

【问题讨论】：

这是a starter。祝你好运！
@tao 我一直在寻找一个开始，这太完美了，谢谢！

标签： css reactjs scroll parallax

【解决方案1】：

请求中更棘手的部分是炸毁<svg>，添加新的<path /> 和<clipPath /> 用于手机模拟中的颜色交换。

最终我让它工作了here。将 clipPath 过渡链接到滚动进度的部分如下所示：

const [y, setY] = React.useState(1739);
const onProgressChange = React.useCallback(
  (a) =>
    setY(Math.max(Math.min(1739, 1739 - ((a - 0.24) / 0.0018) * 17), 36)),
  [setY]
);
const { ref } = useParallax({
  translateY: [0, 185],
  onProgressChange
});

1739 和 36 是翻译的最大值和最小值，它们与 svg 的 viewBox 严格相关。其他值允许在整体滚动进度方面调整动画的开始、结束和速度。

这与一些 CSS 一起负责将正确的动画绑定到正确的滚动进度。
随意对其进行更多调整，特别是如果您添加更多标记。

我想要的另一件事是滚动后不久激活的功能，它将滚动捕捉到某些位置。即，.page 元素。

我使用 gsap 的 ScrollTrigger 插件来完成这项任务，原因有很多：

我有点熟悉（以前用过）
它高效、轻便且不显眼（基本上在检测到另一个用户滚动时退出）
监听所有相关事件（触摸、鼠标指针、键盘），而无需我理解它们，提供统一的界面。
使用惯性（如果您从第 1 页快速向下滚动，它将滚动到第 2 页，直接到第 3 页 - 其他滚动插件限制您每次更改页面时必须滚动一次）
在移动设备上运行良好

该任务还有其他库/插件，您不必使用gsap（尽管我确实认为它很棒）。如果您最终将它包含在您的项目中，请确保您遵守他们的licensing（不是 MIT）。

顺便说一句，我的视差效果的首选本身也将是gsap，因为他们的时间表提供了很多灵活性和选择。
他们最先进的东西是为订阅者保留的，但即使您将自己限制在免费插件中，您仍然可以获得比替代库/插件更多的东西，恕我直言。

看到它working。

【讨论】：