Skrollr.js(followup)根据元素的窗口高度和y位置动态设置属性,但属性必须响应特定的序列

如果您通过我的Skrollr.js在这里:当用户滚动窗口问题时, 循环操作将一直发生 ,那么您基本上知道发生了什么。

Skrollr,我正在使用的插件,无法处理无限循环操作。 所以@Prinzhorn提出的建议是使用“模数运算符”。 我试过这个,你可以看到这里 。 然而,这也带来了另一个问题,因为你也可以看到,因为我需要一个事件发生(动画)每第N个像素滚动。 但是卷轴从不会传递每一个数字; 它跳过了很多。 所以,到目前为止,我无法弄清楚如何从那里获得恒定的间隔。

无论如何,这个问题以及这样一个事实:即使他们正在影响的事物不在视口中,也可能总是发生一些动作(或者更确切地说,很多动作)并不是一个好主意。

所以我决定尝试为我的初始Skrollr动态设置data值。 这些数据值将尽我所能,根据窗口高度和内容位置等通过jQuery自行完成等等。所以,很快,我设置了这个小的JS代码(jsFiddle 1) ,它附加了不同的图层可以在需要添加的任何位置进行动画处理,并设置data间隔,这些图层应在视口中处理它们时的操作。 但是,我还没有弄清楚如何根据下面显示的顺序让他们设置CSS值! 但是当你读到这篇文章时我正在研究它!

 
1
2
3
4
5

请注意,我正在谈论的序列基本上是一层应该显示在另一层之上,从而动画一,二,三,四,五 ……再回到四,三,二,一 ……再来一次等等,


正如我所说,我正在努力,但我已经到了

 for (i in intervals) { layer += ' data-' + (start + intervals[i]) + '=" "'; } 

现在我必须弄清楚如何获得一些这些data属性来定位display: block; CSS更改display: block; 和,其他, display: none; 然后,如何使这些非对称,因为他们需要响应上面的来回序列。


更新否1

好的,这就是我现在要做的事情:在这里看到更新的好消息(2) 。

通过模块,我已经设法接近我需要的东西。 现在它几乎是顺序但不完全。 有任何想法吗?