Использование CSS3 для плавной медленной прокрутки

Question

В основном у меня есть баннер изображений, которые нужно прокручивать слева направо. У меня это работает нормально с jQuery (код вставлен ниже), однако это может быть очень нервным, и клиент хочет, чтобы это было более плавным. Таким образом, после некоторых исследований лучший способ - использовать CSS3 (вероятно, следовало бы начать здесь). Я не использовал много CSS3, кроме основ, таких как border-radius, поэтому пришлось читать. Посмотрев несколько примеров, я смог попробовать сделать прокрутку, но не смог заставить ее работать и с jQuery.

Предполагаемый эффект:

• медленно прокручивайте справа налево "навсегда"
• когда мышь находится над ней, она перестает прокручивать

Я делаю это с помощью следующего 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');
});

Может ли кто-нибудь помочь мне получить такую ​​же функциональность при использовании CSS3 для обработки фактической прокрутки, чтобы она была более плавной (в теории)?

Answer 1

Вот как я бы это сделал, используя 5 секунд для скорости анимации:

Шаг 1: напишите свой класс перехода CSS3

.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;}
}

Шаг 2: настройте jquery для переключения левой позиции

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

}

Шаг 3: контроль запуска / остановки анимации

    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;
      });   
}

Таким образом, вы позволяете движку CSS рендеринга браузера контролировать скорость и движение div для плавности и используете jquery только в качестве механизма триггера.

Надеюсь это поможет.