next.js 创建与帧运动剪辑视差

gj3fmq9x  于 2023-08-04  发布在  其他
关注(0)|答案(1)|浏览(88)

为了更好地说明我的想法,我用Figma绘制了它:

的数据
这在页面之间的过渡中使用。我想创建一个幻灯片,以涵盖整个页面,把一些贴纸(视差框)上。
困扰我的部分是,我不知道如何使视差框剪辑。我试过:
1.将视差作为幻灯片的子项,并使其从-100vw0进行动画,但这会导致视差框的行为变得奇怪,就像从左向右滑动一样。
1.将scaleX而不是translateX应用于幻灯片,但视差框也在缩放。
1.制作视差框的clip-path属性的动画,但幻灯片使用了缓动功能,因此很难计算剪辑值,而视差框也在滑动。
我在CodeSandBox上创建了一个草稿,请根据它修改。

相关问题