视差滚动两个方向

Question

我正在尝试在Scrollorama的帮助下创建视差滚动网站但是我想使用非典型的动画.此动画应从上到下,然后停在页面中间并返回(从中间到顶部).Scrollorama的作者说,这种类型的动画不支持scrolllorama,也不支持他的新插件SuperScrollorama.也许有人可以建议我另一个具有此功能的插件.

Answer 1

我之前从未见过Scrollorama,它引起了我的兴趣,所以我建立了一些东西来做你所要求的.它不是插件; 我希望滚动代码简单,不要使用插件类型的代码混乱.我认为把它变成一个插件会非常简单,所以我会把它留给你(除非你需要一些帮助).

代码说明

jQuery有一个scrollTop()函数来确定容器滚动顶部的距离.使用滚动区域内元素的高度和容器的高度,我们可以确定容器滚动的百分比:

scrollAmount / (totalSize - visibleSize) 

(我们必须减去容器的高度visibleSize才能得到正确的结果.因为scrollTop()返回隐藏元素顶部的像素数,所以一直滚动到底部会给我们totalSize - visibleSize,而不仅仅是totalSize)

我们可以使用该百分比来确定何时向上,向下或保持在相同位置.该repositionBanner()函数采用滚动百分比并决定如何处理动画元素.在我的代码中,我选择让元素从0-30%移动到位,从30-70%保持其位置并从70-100%飞回原始位置.

(我所有的代码假设你正在处理的垂直滚动.同样的概念可以适用于水平滚动使用left和width替代top和height)