使用javascript在开始和结束点之间缩放CSS

时间:2016-03-15 17:04:54

标签: javascript css

我正在尝试编写一个小脚本,根据特定的滚动距离计算minmax范围之间的比例变换值。

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

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

我也在下面的容器上玩getBoundingClientRect().top,因为一旦它低于0,你知道转换应该完成,但是再一次,没有这样的运气。

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

1 个答案:

答案 0 :(得分:1)

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

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