jQuery анимация фонового положения для более плавного перехода

Question

У меня есть анимация фонового рисунка в jQuery, сделанная вот так.

 banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px'); 

     window.setInterval(function() { 
      banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px'); 
      y--; 
     }, 150); 

Живой пример http://codepen.io/anon/pen/emMxXa

Но это скорее 'нервным'. Как я могу сделать что-то подобное, чтобы работать более плавно и медленно.

Answer 1

Вы хотите использовать, и смотреть в CSS переходы и CSS анимации для реального smoothyness.

-webkit-animation: move 30s linear 0s infinite alternate; 
-moz-animation: move 30s linear 0s infinite alternate; 

@-webkit-keyframes move { 
    from { background-position: 0px 0px } to { background-position: 0px 400px } 
} 

@-moz-keyframes move { 
    from { background-position: 0px 0px } to { background-position: 0px 400px } 
} 

Демо: http://codepen.io/anon/pen/EaEMvy

Answer 2

Посмотрите на это jsFiddle.

Вы увидите, что за счет уменьшения интервала значения от 150 до 30, это будет намного более гладкой:

   window.setInterval(function() { 
       banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px'); 
       y--; 
       //x--; 

       //if you need to scroll image horizontally - 
       // uncomment x and comment y 

      }, 30); 

Вы можете понизить его еще больше, но чем больше вы опускаете его, тем быстрее он получает также.

Answer 3

посмотреть на https://developer.mozilla.org/en-US/docs/Web/API/window.requestAnimationFrame

(function($) { 

     var x = 0; 
     var y = 0; 
     //cache a reference to the banner 
     var banner = $("#banner"); 

     // set initial banner background position 
     banner.css('backgroundPosition', x + 'px' + ' ' + y + 'px'); 

     // scroll up background position every 90 milliseconds 
     function step() { 
      banner.css("backgroundPosition", x + 'px' + ' ' + y + 'px'); 
      y--; 
      //x--; 

      //if you need to scroll image horizontally - 
      // uncomment x and comment y 
        window.requestAnimationFrame(step) 
     } 

    window.requestAnimationFrame(step); 

})(jQuery);