基本缩放数学方程需要帮助

时间:2017-11-08 19:10:57

标签: math

我无法解决我试图实施的数学问题。

所以当0在页面上滚动时,我希望背景为不透明度0.5 并且在页面上窗口高度的滚动位置,我希望背景为不透明度1.0

所以在打开网页时,jQuery会获得页面的高度,让我们说它的值为700像素。

当屏幕滚动到位置350时,我希望背景为不透明度0.75

要点:

在滚动位置0处,背景为0.5

在滚动位置350处,背景为0.75

在滚动位置700处,背景为1.0

我可以使用什么数学公式来获得这个结果?

1 个答案:

答案 0 :(得分:0)

如果0.5最小,1.0是最大值,那么您的等式将如下所示:

opacity = 0.5 + 0.5 * scroll_position / page_height

快速检查一下:

0.5 + 0.5 * 0 / 700 = 0.5

0.5 + 0.5 * 700 / 700 = 1.0

0.5 + 0.5 * 350 / 700 = 0.75

您可以将等式视为两半:

前半部分是最小0.5,这是固定的。

后半部分必须最多提供另一个0.5,在这种情况下,结果将是1.0。在这种情况下,如果0.5scroll_position一样多,我们想要一个完整的page_height,如果scroll_position更低,那么我们应该只返回一小部分{ {1}}。这意味着我们只想通过执行除法然后乘以最大值来取两者的比率:

0.5