2

I have ten div's added every second, each with an image, and I want them to slide in from the left. This is too intensive work for javascript, and also too much for keyframing.

So what would be the most efficient (CPU/memory wise, also considering mobile devices) way of doing this?

Thanks.

knutole
  • 1,709
  • 2
  • 22
  • 41
  • Does a for/foreach loop not suit this? And removing the oldest 10 with a new refresh? P.s. you might need (not sure) AJAX to load new divs without having to refresh the page. – paddotk Mar 27 '13 at 19:08

2 Answers2

1

Can you use JS to add a class to them using a setInterval, then use CSS transitions with that class?

Jason Lydon
  • 7,074
  • 1
  • 35
  • 43
  • good suggestion, thank you. but - are transitions cheapest, CPU wise? – knutole Mar 22 '13 at 15:51
  • I could be wrong, but I think CSS is always less expensive that JS, unless the CSS is out of control. – Jason Lydon Mar 22 '13 at 19:18
  • 1
    CSS3 transform `translate(3d)` will utilize the GPU, and is thus from what I can understand the most efficient way of moving an object. – knutole Apr 26 '13 at 06:01
0

Using a framework like jQuery Transit can easily accomplish this. The great thing about this framework is that it works great on mobile devices (within reason) and uses the hardware acceleration capabilities of the browser wherever it can.

JS Fiddle Example

Javascript:

$(document).ready(function () {

    showDiv($('div:first'), 90);

    function showDiv(div, pixels) {
        div.transition({
            opacity: 1,
            left: pixels + '%'
        }, 1000, 'out', function () {
            //call back
            showDiv(div.next("div"), pixels - 10);
        });
    }
});

It isn't a perfect example by any means, but it should steer you in the right direction.

Insane mode for those that live on the edge.

Gaff
  • 5,507
  • 3
  • 38
  • 49