The website I am working on has a repeating background pattern applied to the <body>. The pattern is not fixed and scrolls vertically as expected when scrolling up or down the page.
There is a reel at the top of the with three sets of text. These sets slide left to right on the press of some navigation items:
At the moment, the text moves left/right, however the background remains horizontally fixed (this is also expected).
The goal is to animate the background pattern in a given direction at the same speed as the movement of the text to give the effect of a complete scroll left or right, rather than the text "sliding" on top of the canvas left or right.
I've used a JQuery plugin before that let me animate the background-position value of an element, maybe something that will work?
Absolutely! I would use the background position jQuery plugin:
http://www.protofunc.com/scripts/jquery/backgroundPosition/
Here is a tutorial for a cool effect using this concept and may give you some ideas. http://snook.ca/archives/javascript/jquery-bg-image-animations
I'd also suggest that you move the background image into a div just inside the body, as this will give you more flexibility should you need to tweak anything a little further.
overflow: hidden;applied, then scroll the whole div - RemarkLima 2012-04-04 08:37