Using CSS3 to make a smooth slow scroll

Question

Basically I have a banner of images which are to scroll from left to right. I have it working fine with jQuery (code pasted below) however it can be very jittery and the client wants it smoother. So after some research the best way is to use CSS3 (probably should have started here). I haven't used much CSS3 other than the basics like border-radius so had to read up. After seeing some examples I was able to try out making the scroll however I couldn't get it to work with jQuery as well.

The intended effect:

scroll slowly from right to left 'forever'
when mouse is over it, it stops scrolling

I do this with the following jQuery:

$(document).ready(function() {
    var $scrollMe = $('.ScrollMe');

$scrollMe.hover(stopBannerAnimation)
$scrollMe.mouseout(startBannerAnimation)

function stopBannerAnimation() 
{
    $(this).stop();
}

function startBannerAnimation()
{
    /*if (Modernizr.csstransitions) 
    {
        $scrollMe.css('left', '{xen:calc '{$scrollerWidth} * 100'}px');
    }
    else*/
    {
        $scrollMe.animate(
            {left: -{$scrollerWidth}}, 
            {xen:calc '{$scrollerWidth} * 60'}, 
            'linear',
            function(){ 
                if ($(this).css('left') == '{$scrollerWidth}px') 
                { 
                    $(this).css('left', 0); 
                    startBannerAnimation(); 
                } 
            }
        );
    }
}
startBannerAnimation();

$('.ScrollMe ol').clone().appendTo('.ScrollMe');
});

Can someone help me get this same functionality while using CSS3 to handle the actual scrolling so it is smoother (in theory)?

frenchie · Answer 1 · 2012-03-12T11:19:09.607

This is how I'd do it, using 5 seconds for the animation speed:

Step 1: write your CSS3 transition class

.ScrollMe{
   -webkit-transition:left 5s ease;  // here the animation is set on 5 seconds
   -moz-transition:left 5s ease;  // adjust to whatever value you want
   -o-transition:left 5s ease;
   transition:left 5s ease;}
}

Step 2: set up the jquery to toggle the left position

function DoAnimation () {

  var $scrollMe = $('.ScrollMe');

  if ($scrollMe.offset().left === 0) {
      // I imagine you calculate $scrollerWidth elsewhere in your code??
      $scrollMe.css('left', $scrollerWidth); 
  } else {
      $scrollMe.css('left', 0);
  }

  setTimeout(function () {
     if (LaunchAnimation === true) { DoAnimation(); } 
  }, 5000); // here also assuming 5 seconds; change as needed

}

Step 3: control animation start/stop

    var LaunchAnimation = true;

    $(document).ready(function() {

      $('.ScrollMe').mouseover(function () {
         //this stops the div from moving
         if (LaunchAnimation === true) {
            $(this).css('left', $(this).offset().left);
            LaunchAnimation = false; 
         }
      });

      $('.ScrollMe').mouseleave(function() { 
         DoAnimation();             
         LaunchAnimation = true;
      });   
}

This way, you let the CSS rendering engine of the browser control the speed and movement of the div for smoothness and you use jquery only as the trigger mechanism.

Hope this helps.

Nah this method seemed buggy due to browsers I think... and even when working still a little jittery. Was able to compromise with the client to use a different effect instead. — Robbo, Apr 17 '12 at 10:15
you should try again; this is the code I'm using for my site and it works just fine for me, in all browsers that support CSS3. Try it out as a side project; you'll get it working. — frenchie, Apr 17 '12 at 13:25

Using CSS3 to make a smooth slow scroll

1 Answers1