Saturday, June 8, 2013

Skrollr.js: Looping action that will happen all the time while client is scrolling window

Skrollr.js: Looping action that will happen all the time while client is scrolling window

Surprisingly, I can't find an answer to this question in Stack Overflow. Seems no one has a need for what I'm specifically after. However, Skrollr has no real documentation I can find, so there's really no way of finding out how exactly this plugin works; unless, of course, one takes apart the code and investigates.
The following (what you'll see in the jsFiddle project) is what I have. But what I want is to create a loop here so as not to have to include data-X tags ad infinitum in my code. The idea is that this Skrollr script must work on a page that will be as long as the content, which is retrieved from MySQL. So it could be 1,000px long in one instante, for example, and then 50,000px long, as it were.
In such cases, I don't want to have to worry about Skrollr. I just want the animation to go on for ever as the user scrolls the window.
Any ideas? I've tried to build a couple of jQuery workarounds, but I can't get to the bottom of how the Skrollr.js script is doing what it does, so I can't 'fix it.' To make things worse, and adding to the Skrollr Mystery, the full skrollr.js and the skrollr.min.js do not work the same! Actually, it seems the full version, for some strange reason, is not working properly, whereas the 'minified' version of Skrollr works fine. The normal skrollr.js (a) doesn't work in jsFiddle at all and (b) when I try it out in my localhost, it goes through the items once and then stops... Anyway, this just adds to the frustration, but is not the key issue.
HERE YOU HAVE THE JSFIDDLE PROJECT WITH ALL THAT NEEDS TO BE KNOWN!
Basically, as I said above, the idea is to have the one, two, three, four, five, four, three, two, one... constantly iterating up and down, up and down, ad infinitum while the user scrolls the window.