Javascript 复数学水平视差缓和函数

我目前正在研究网络上的视差效果

视差滚动是计算机图形学和网页设计中的一种技术，在这种技术中，背景图像的移动速度比前景图像慢，从而在2D场景中产生深度错觉，增加沉浸感。 ~Wikipedia

我想创建一个小容器，可以是一个图像，或任何块级元素，并在用户滚动时在屏幕上水平移动它

该效果应可在所有视口中缩放。这意味着元素移动所经过的元素的高度和宽度应该无关紧要

当用户滚动屏幕高度的一半时，移动的元素应该在准确的中心。由于用户将滚动屏幕的一半，因此元素将已经垂直。我们现在只担心这个问题

我考虑这个问题已经有一段时间了，并且想出了一个很好的方法

获取要移动元素穿过的元素的高度和宽度。例如，高1000像素、宽600像素的屏幕

把宽度除以高度。例如600px/1000px=3/5=0.6

取用户滚动的像素数量，乘以我们刚刚创建的数字。例如，500px*0.6=300px。正如你所看到的，这正是中心

按刚刚计算的像素量在屏幕上移动元素

即使对于每个屏幕大小，这种计算也可以很好地工作，但它是线性的。这意味着元素将在屏幕上始终以相同的速度移动。让我告诉你我的意思

让我们画一个屏幕尺寸。比如说1000*500 计算此图的两个点-> 屏幕系数：500/1000=0.5 1.第一点很简单。比如说，我们精确地滚动了0px->0.5*0=0 移动的元素将根本不会移动。 2.对于第二个元素，我们将以中心为中心。只是为了方便

垂直中心在500px->0.5*500=250 px处，正好是水平中心

将结果放在图表中，并画一条线穿过这些点。 在上图中，您可以看到，每当用户向下滚动时，移动的元素将沿着x轴上的值线移动

我的问题 我真的希望我描述得足够好，能够理解。现在来回答我的问题

我想创建一个移动元素，它在屏幕的边缘会更快，中间会减慢一点。如果我们用我们刚才做的同样的方式画出来的话。创建一个图形，在该图形中，我们可以获取滚动的像素数量，并查看元素应水平放置的位置，如下所示：

很抱歉图像质量很差，但这是我遇到问题的部分

正如你在图中看到的，移动元素不会在图中间移动那么多。我在画的时候画得有点过头了，但你明白了大概的意思

我需要的是一个数学函数，它接受屏幕高度、宽度和滚动像素的数量三个参数，并返回移动元素的水平位置

我的想法是： 我的想法是将元素定位在页面的死角，然后根据滚动的距离，使用CSS和JavaScript将元素左右移动

图中的内容如下所示：

上面的手绘图形适用于1000x600px的屏幕，因为移动元素在未进行滚动时转换为-300px，在100%滚动时转换为300px

然而，我不知道如何创建一个适用于每个屏幕大小的数学函数

为了清楚起见，我需要一个总是从Y=-screen-width/2和X=0开始的函数。它应始终穿过点sreen高度；屏幕宽度//2，函数的形式应为x^3，以获得正确的图像

---

我真的希望我解释得足够好，我真的希望有人能在这里帮助我。

你可以用一个函数f来定位它，它实际上绘制了轨迹

这就是我提出的想法：

创建函数轨迹f，以使f0=0和f1=1添加更多约束，以便再现所需的效果，例如：f0.5=0.5 在每个滚动事件中，将x设置为滚动量，并使用坐标fx*w-s，x*h-s定位元素，其中w是文档宽度，h是文档高度，s是元素大小 我可以看到三次函数是按照你想要的轨迹绘制的，所以我一直在用不同的函数进行测试，我得到了这个工作示例

你可以使用这个工具生成更多的三次函数，我刚刚找到或解决了两个线性方程组，你只想找到fx=ax^3+bx^2+cx的a，b，c和d的值 +d

来自math.stackexchange的答案 除了在这里问我的问题，我还把这个问题发布在math.stackexchange.com上。Stackoverflow的数学姐妹站点。有人帮我找到了问题的答案

该函数必须是这样一个函数：根据元素首次可见以来滚动的像素量，输出移动元素相对于页面水平中心的水平位置（以像素为单位）。该函数必须在边缘上更陡峭，并且在中间容易进入短停止，并且可以在每个可能的屏幕大小上使用。这意味着数学函数必须基于两个变量定位，屏幕高度和宽度

他们在math.stackexchange上得出的答案是：

在本例中，s-width是屏幕的宽度（以像素为单位）。s-height是屏幕的高度，以像素为单位。px scrolled是自元素首次可见以来滚动的像素数

输出位置是移动元素相对于屏幕中心的水平位置（以像素为单位）

如果将所有这些数学运算都放入JavaScript，则会得到以下结果：

var pos = ((4*win_width)/(Math.pow(win_height, 3))) * Math.pow(px_since_visible - (win_height/2),3)

---

codepen上有一个可用的工作示例。你可以找到它。你有一个没有放松的工作示例吗？我现在没有时间，但如果今天晚些时候出现了这个问题，没有答案，请在我的名字上加上注释，我会尝试一下。@NinaScholz我可以在大约10分钟内把它编码出来。然而，这并不是真正的问题所在。如果你的答案需要它，我会很快编码出来…@jason我会的，谢谢你的提议。@JessevanderPluijm，我真的不知道这个问题是关于什么的。也许举个例子能帮上忙，这就是我为什么要问的。谢谢你的回答。你为什么要把元素放在这个y位置？只是好奇，因为你画的轨迹很像一个三次多项式，嗯，是的，这是真的。数学函数用于根据用户的垂直位置确定元素的水平位置。幸运的是math.stackexchange已经解决了这个问题。如果你感兴趣的话，去看看被接受的答案。

var pos = ((4*win_width)/(Math.pow(win_height, 3))) * Math.pow(px_since_visible - (win_height/2),3)