Как добавить эффект прокрутки фона для нескольких элементов с разными настройками?

Question

В этом демо http://www.htmldrive.net/items/demo/527/Animated-background-image-with-jQuery

Этот код только для одного фона. Я хочу добавить несколько фонов с разным направлением и скоростью.

 var scrollSpeed = 70;
 var step = 1;
 var current = 0;
 var imageWidth = 2247;
 var headerWidth = 800;  

 var restartPosition = -(imageWidth - headerWidth);

 function scrollBg(){
  current -= step;
  if (current == restartPosition){
   current = 0;
  }

  $('#header').css("background-position",current+"px 0");
 }

 var init = setInterval("scrollBg()", scrollSpeed);

В настоящее время у него есть настройки для

  $('#header').css("background-position",current+"px 0");

На веб-сайте я хочу использовать этот эффект также на фоне #footer или #content. но с разной скоростью и направлением.

И есть ли лучший и более оптимизированный метод jquery для достижения того же эффекта?

И можем ли мы получить тот же эффект, используя CSS 3, без JavaScript?

Answer 1

Только что увидел ответ ОП, но решил все равно написать:

Я создал плагин jQuery для этого:

(function($) {
    $.fn.scrollingBackground = function(options) {
        // settings and defaults.
        var settings = options || {};
        var speed = settings.speed || 1;
        var step = settings.step || 1;
        var direction = settings.direction || 'rtl';
        var animStep;

        // build up a string to pass to animate:
        if (direction === 'rtl') {
            animStep = "-=" + step + "px";
        }
        else if (direction === 'ltr') {
            animStep = '+=' + step + "px";
        }

        var element = this;

        // perform the animation forever:
        var animate = function() {
            element.animate({
                backgroundPosition: animStep + " 0px"
            }, speed, animate);           
        };
        animate();
    };
})(jQuery);

Использование:

$("#header").scrollingBackground({
    speed: 50,
    step: 50,
    direction: 'ltr'
});

Это довольно просто, и предполагается, что вы повторяете фоновое значение: repeat-x для элемента, для которого вы его вызываете.Таким образом, нет необходимости периодически сбрасывать положение фона.

Рабочий пример: http://jsfiddle.net/andrewwhitaker/xmtpr/

Answer 2

Я мог бы разработать следующее решение.Я не уверен, что это эффективно.Будем ждать, пока кто-нибудь прокомментирует или предоставит лучший вариант.До тех пор ...:

var scrollSpeed = 70;
 var step = 1;
 var current = 0;
 var images = 
 [
    {
    imageWidth:2247,
    imagePath:"images/image1"
    },
    {
    imageWidth:1200,
    imagePath:"images/image2"
    }
 ]
 var headerWidth = 800;  
 var imageRotateCount = 0;
 var imagesLength = images.length;

 $('#header').css("background-image", images[0].imagePath);

 function scrollBg(){
    var curIndex = imageRotateCount%imagesLength;
    var curImage = images[curIndex];
  current -= step;

    var restartPosition = -(curImage.imageWidth - headerWidth);
  if (current == restartPosition){
   current = 0;
     imageRotateCount++;
     curIndex = imageRotateCount%imagesLength;
     curImage = images[curIndex];
     $('#header').css("background-image", curImage.imagePath);
  }

  $('#header').css("background-position",current+"px 0");
 }

 var init = setInterval("scrollBg()", scrollSpeed);