使用react-scroll-parallax实现带设备遮罩的多页面视差效果求助

效果参考 #

• 移动端：滚动时设备模型从屏幕中部位置移动至屏幕中心，内部内容同步跟随滚动
• 网页端有对应示例效果

需求描述 #

要构建一个三页面的React网站，实现以下视差逻辑：

1. 从页面1滚动到页面2时，移动设备模型从屏幕中部起始，最终停在屏幕中心；设备内部的内容同步完成滚动。
2. 从页面2滚动到页面3时，网站组件恢复正常滚动行为。

已尝试方案 #

曾通过绝对定位+z-index的容器，结合translateY={[-50, 125]}的Parallax组件实现近似效果：

<div className="absolute z-10 w-full">
    <Parallax translateY={[-50, 125]}>
        {/* 设备模型及内部内容 */}
    </Parallax>
</div>

但在该容器内添加带z-index的子元素时，视差效果出现异常。

关键问题 #

1. 设备模型内部内容处理：需要同时给设备模型和内部内容添加视差效果，且内部内容需用SVG遮罩裁剪。尝试过图片z-index设置、SVG遮罩、背景图等方式，均未达到预期效果（已准备好设备模型SVG框架及遮罩文件）。
2. 设备模型缩放适配：希望效果适配移动端和网页端，尝试用边距缩放设备模型，但无法同步适配遮罩，不确定是否应该使用固定宽高。
3. 双视差需求：设备模型内部内容是HTML（非图片），需要和设备模型同步实现视差滚动。

总结 #

已尝试多种方法但仍未解决细节问题，恳请提供帮助或建议，若需补充信息可告知！

内容的提问来源于stack exchange，提问作者CTOverton