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