在双三次贝塞尔曲线上滚动速度

Question

这个网站：https://gladeye.com/有一个非常有趣的滚动行为。您可以在幻灯片（屏幕）之间移动，感觉就像在滚动到幻灯片的地方滚动一样。但事实上，该网站不断滚动，但基于双三次Bezier曲线（我查看了它们的缩小代码），使用CSS 3D变换移动幻灯片的速度越来越慢。

由于我不是数学和贝塞尔曲线的专家，我很难实现这一点。我想知道是否有人可以帮助我并让我对此表示满意。谢谢。

Answer 1

我认为你需要一些近似曲线。让我们为每个页面（屏幕）构建一对曲线。

在ScreenSize MaxSpeed和h = 0 h = ScreenSize，MinSpeed时刻h = ScreenSize/2

给出值：first curve P[0] = (0, MaxSpeed) P[1] = (A, MaxSpeed) P[2] = (ScreenSize/2 - 3 * A, MinSpeed) P[3] = (ScreenSize/2, MinSpeed) second curve P[0] = (ScreenSize/2, MinSpeed) P[1] = (ScreenSize/2 + 3 * A, MinSpeed) P[2] = (ScreenSize - A, MaxSpeed) P[3] = (ScreenSize, MaxSpeed) ，3

我们建造两条（镜像）贝塞尔曲线 控制点：

ScreenSize

使用参数A（粗糙的ScreenSize / 10）和系数2*ScreenSize进行游戏，以获得所需的形式。

下一个屏幕的曲线移动了.hidden，.menu，依此类推。