0

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,);
    });
KArneaud
  • 4,143
  • 8
  • 37
  • 63
  • 1
    [These](http://stackoverflow.com/a/905341/2065702) [might help](http://stackoverflow.com/a/488073/2065702). May I ask why in the world you want to use translateY to move elements on scroll? – Zach Saucier Sep 19 '14 at 02:02
  • better performance on mobile browsers using webkit – KArneaud Sep 19 '14 at 02:50
  • Better performance for what? Why move elements from the top to the bottom? – Zach Saucier Sep 19 '14 at 03:11
  • I'm trying to create a looping sequence. My first choice was to use the canvas API but proved to be too flaky on Android 2.3. transformation on Android 2.3 are pretty decent compared and since I can't really do animated background using translate this was my best bet – KArneaud Sep 19 '14 at 03:24

0 Answers0