I have 3 divs at an absolute position and a translateY()
on a requestAnimationFrame I move them via the translateY() css declaration relative to the mouse position but for the life of me I can't figure out how to loop the divs after passing the viewport
I have the following code in the requestAnimationFrame
street.each(function(i,el){ // an array of the divs
var bounds = el.getBoundingClientRect(); // get the bounds
// here is where it gets tricky. i'm trying to detect when the div's view port has passed
// the screen so as to start it over
var yPos = bounds.top >= h? -y - bounds.height * 2 : (y - bounds.height * i); // y is the position of the mouse from 0,0
$(el).css($.fx.cssPrefix + 'transform','translateY(' + yPos +'px)'); // set the translation of Y
//console.log('street',i,'y', y, 'top: ', bounds.top, 'bottom',bounds.bottom,);
});