How to add scroll background effect to multiple elements with different settings?

Question

In this demo http://www.htmldrive.net/items/demo/527/Animated-background-image-with-jQuery

This code is for one background only. I want to add multiple background with different direction and speed.

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

Currently it has settings for

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

In a website I want to use this effect on #footer or #content background also. but with different speed and direction.

And is there any better and more optimized jquery method to achieve same effect?

And can we get same effect using CSS 3, without javascript?

Don't use a string as the first parameter of `setInterval` just pass the function, e.g `setInterval(scrollBg, scrollSpeed)` passing a string will call `eval` in the background, which is evil. — Ivo Wetzel, Dec 26 '10 at 18:10

score 4 · Accepted Answer · answered Dec 26 '10 at 19:16

4

Just saw the OP's answer, but decided to post anyway:

I've created a jQuery plugin to do this:

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

Usage:

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

This is pretty basic, and assumes that you're background-repeat is 'repeat-x' on the element you call it on. This way, there's no need to reset the background position every so often.

Working example: http://jsfiddle.net/andrewwhitaker/xmtpr/

answered Dec 26 '10 at 19:16

Andrew Whitaker

124,656
32
289
307

@Andrew Whitaker - Thanks for the answer and jsFiddle link. What is the difference between your solution compate to link which i found? – Jitendra Vyas Dec 27 '10 at 03:33
@Jitendra: I've just visited the link you posted. I guess the only difference is that I'm using jQuery animate and not setInterval. The plugin you posted looks a little more robust with more options and whatnot. I'm also not using `eval()` anywhere. – Andrew Whitaker Dec 27 '10 at 03:34
@Jitendra: I'm not sure. I can do some benchmarking and get back to you. I suspect the difference will be minimal though; it depends on the implementation of jQuery's animate function. – Andrew Whitaker Dec 27 '10 at 05:16
@Andrew Whitaker - Have you tested? – Jitendra Vyas Dec 27 '10 at 15:20
@Jitendra Vyas: I set up a jsperf here: http://jsperf.com/jquery-bg-animate that leads me to believe my solution is faster. – Andrew Whitaker Dec 28 '10 at 05:25
@Andrew Whitaker - Thanks very much. Thanks for making this plugin and giving me this answer. I appreciate all of your efforts. – Jitendra Vyas Dec 28 '10 at 05:57
@Andrew Whitaker - and thanks again for sharing this useful site with me jspref – Jitendra Vyas Dec 28 '10 at 05:59
@Jitendra Vyas: No problem! Glad to help. – Andrew Whitaker Dec 28 '10 at 06:01
@Andrew Whitaker - I'm facing one problem. When I change anything here `backgroundPosition: animStep + " 0px"` ,animation stops. background images are bottom aligned in my case and when i apply your jQuery animation, images come on top and if i change `backgroundPosition: animStep + " 0px 0px"` animation stops. – Jitendra Vyas Jan 11 '11 at 01:44
@Jitendra Vyas: How are you bottom-aligning your images? `backgroundPosition` expects `backgroundPosition: Xpx Ypx`. – Andrew Whitaker Jan 11 '11 at 01:50
`background-position {0 bottom}` – Jitendra Vyas Jan 11 '11 at 02:13
@Jitendra: You could try `backgroundPosition: animStep + " bottom"` (untested). – Andrew Whitaker Jan 11 '11 at 02:18
@Andrew Whitaker - Did you checked in IE? Your example link is not working in IE 8 and 7 :( – Jitendra Vyas Jan 11 '11 at 03:50
http://stackoverflow.com/questions/4655405/jquery-example-in-jsfiddle-working-in-firefox-but-not-in-ie8-7 – Jitendra Vyas Jan 11 '11 at 08:50

score 0 · Answer 2 · answered Dec 26 '10 at 17:26

I could work out the following solution. Am not sure if it is efficient. Will wait for anyone to comment or provide a better option. Till then...:

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

How to add scroll background effect to multiple elements with different settings?

2 Answers2