我正在尝试构建类似于Google Store上的视差脚本。 (请参阅以下部分以供参考:机舱,带电话的车上男人,带水的桌子,带卡通狗的妇女笑着)
每个视差部分可以具有不同的属性,例如-图像比例和 to 和 from 值。这就告诉视差部分将产生什么效果以及在何处开始和结束过渡。在此示例中,图像将随着访问者向下滚动页面而缩放,但是它可以是任何数量的选项,这使得它非常灵活。
我要重现此效果的目标是,将用户可见屏幕与视差区域进行比较的百分比返回。这是我的示例代码中的p
。现在,我的脚本从文档页面的顶部到视差部分的底部显示一个正百分比,虽然这不是我所需要的,但是它可以计算。我认为快到了。
在JS Fiddle示例中,我希望p
在用户屏幕底部首次触摸视差部分(灰色区域)的顶部时为0%,而在屏幕底部顶部到达视差部分(灰色区域)时为100%屏幕触摸视差部分的底部。在p
视差区之前为负数,在视差区之后大于100%。
https://jsfiddle.net/JoshRowland/h04j3m82/41/
p = (obj_pos_y_end - ((obj_pos_y_end + winHeight) - scrollBottom)) / obj_pos_y_end;