行星和星号作为页面滚动

Question

我是一名教师，我正在尝试为我的学生制作一个页面，显示行星和星星的比较大小，就像在Youtube中流行的那些视频中一样。

但我无法解决问题，我得到的最接近的是使用“如果window.pageXOffset＆gt; 1000”动画宽度等，但我真正想要的是行星和星星（图像）滚动到在100％高度处查看，然后当页面向右滚动时，当到达左边界（左= 0px）时，它们会缩小到0％，而下一个和下一个行星滚动到视图中（显示3或4）时间）等等。该页面应允许用户随意来回滚动。

我尝试了transform：scale方法，但也没有成功。

非常感谢任何帮助。

Answer 1

您使用transform: scale()正在朝着正确的方向发展，我已经采取了这种方式并与之一起运行。请参阅以下jsfiddle：

https://jsfiddle.net/2z4djt0o/5/

在滚动事件期间，我们会查看每个行星，并根据它相对于滚动视口左右边缘的位置来确定其比例。