背景图像水平视差

Question

So I am working on building a jQuery swipe feature mainly designed for mobile devices and am entering an area I've never entered before with a parallax background of sorts. I am trying to keep the background image height to the size of the screen which I can achieve with the cover property

background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;

however this doesn't get me the parallax effect I want for the width, I suppose the best way to understand what I am trying to do would be something like what is talked about in this question

Horizontal scrolling with parallax background for ios

but with javascript/jquery,css & html. I am continuing to work on a solution but exactly what I have so far can be see at:

http://2rivers.ml/confused

Any help on this would be greatly appreciated, this whole Parallax thing is new to me, I am not asking for someone to write the code for me but I am completely lost on how to go about achieving this and after dozens of Google searches I am not much closer than I was.

Answer 1

So this is a fairly straight forward thing to code yourself in javascript. This is a wikipedia article outlining the basic idea.

Essentially you would set a handler on the scroll bar and whenever the page is scrolled update the position of the background layer (this might be by changing the position of an entire div or modifying the background-position CSS property)