Using the jQuery spritely plugin's .pan() to skip in between a defined space

Question

OK, sorry for the awkward title!

It's kind of a unique situation in my opinion.

So basically, with the jQuery plugin Spritely, it's possible to call a .pan() method/action which allows you to (self-explanatory really) pan something across the screen.

I currently have three video game scenes panning from left to right and visa versa in the background of my page, behind my content.

Now, I was thinking it would be cool, that instead of when part of the panning image is passed behind my content <div>s, it would skip to the other side, without going behind the <div>s.

I would also like for sprites to be able to go from the left side to the right side, so it would be nicer if it wasn't two separate instances of the plugin. I'm open to any suggestions though!

Is there an easy way to specify this?

Thanks!

Answer 1

because you are moving images I doubt there is an easy way to to do this other than using two instances of the plugin. Both moving the same way but one on the left of the content, one on the right, and timed so that it appears to be just one reel.

You may not want to do this because of performance issues but as long as you keep the rest of the plugin simple and optimise your images well I think you should be fine.

EDIT

Still think this is the only way to achieve the effect. I would probably keep the html as you have it with all the background image as single entities but I would use js to clone them, position them and move them. Example:

var windowSize = $(document).width();
var elementSize = (windowSize - $('#header').width())/2;

$('#bg_1').addClass('bg_1').css('background-position','right top').width(elementSize+'px').clone().css({'left':'auto','right':'0','background-position':'left top'}).insertAfter('#bg_1');

$('.bg_1').each(function(){$(this).pan({fps: 3, speed: 2, dir: 'right'})});

Naturally this needs some work but I tried running this in firebug on you site and it achieves the effect more-or-less. The positioning of the background images is off but I imagine that is because of the pan function having started. If the pan function automatically positions the background images before it starts moving them then the effect you want will be even harder to achieve.

You'd also be left with the issue of the background behind the rounded corners, although in at the top I think this would just be blue anyway.