CSS 缩放在起点和终点之间与 javascript 一起使用

CSS scale between start and end point with javascript

本文关键字：javascript 一起之间终点缩放起点 CSS 更新时间：2023-09-26

我正在尝试编写一个小脚本，该脚本根据特定的滚动距离计算min和max范围之间的比例转换值。

例如： var min = 1; var max = 1.3; var distance = window.innerHeight; var scrollTop = window.pageYOffset;

对于上下文，转换应该在一个窗口滚动的长度上发生。此页面的登陆是全屏背景，因此一旦发生全窗口滚动，距离将始终完成。

我也在下面的容器上玩过getBoundingClientRect().top，因为一旦它低于 0，您就知道应该完成转换，但同样，没有这样的运气。

我已经尝试了许多不同的方法，但还没有接近生成我需要的数字，所以主要是我正在寻找生成正确数字的过程。我没有使用任何外部库或插件，请不要建议jquery或GSAP。非常感谢任何提示或示例，谢谢！

我认为这就是您正在寻找的数学。

transformValue = min + (max - min) * Math.min(scrollTop / distance, 1);