Parallax background position in window calculation

Question

Can somebody please help me with what first appeared a simple function, but now has me pulling my hair out?

I am using a pretty simple chunk of jQuery that is binding to the window scroll function. I believe I have all the variables I need to get this working but it would appear not. My math(s) appears to be lacking.

I apologise for not being able to attach an image due to having zero reputation! The variables I have are, the browser window (x), the height of my div (y) which has a scrolling background image, the background image height (z) and the scrolling position of the top of the div to the top of the browser window (o).

The background position of the div needs to move relative to the div's position within the window so that the whole image will be seen from the div scrolling from top to bottom (and vice versa) of the browser window.

My calculations are these:-

x+y gives me the whole range of movement the div will require to cover 
from it first being visible to it finally leaving the screen.
z-y gives me the range of movement the background image will require to 
cover for the whole image to scroll through the div as the div scrolls
through the browser window.
(z-y)/(x+y) gives me the number of pixels the background image has to 
move for every 1 pixel the browser window will scroll.
As an example,
x = 200
y = 50
z = 150
o starts at -50 and ends at 200
x+y = 250 (full div movement)
z-y = 100 (bg image movement)
(z-y)/(x+y) = 0.4 bg movement per pixel scrolled

Therefore, as the div position is scrolled from -50 all the way to 200, the bg image needs to scroll from 0 to -100.

I'm at a loss as to how to tie these last threads together. Can anyone help me correlate these numbers?

Thanks in advance, and sorry if it sounds dumb.

Mark

Here's my final code, thanks to Vincent and Rob for their help. This should work with any parallax scrolling needed using data-type="background" for any sized area. The speed will be dictated to by the browser height and background image size. Thanks again guys.

$(function(){
 $(window).bind('scroll', function() {
 $window = $(window);
 $('section[data-type="background"]').each(function(){
 var $bgobj = $(this);
 var windowHeight = 0;
 windowHeight = document.body.clientHeight;
 var img = new Image;
 img.src = $(this).css('background-image').replace(/url\(|\)$/ig, "");
 var bgImgHeight = parseInt(img.height);
 var divHeight = parseInt($(this).css('height'));
 var scrollPos = $(this).position().top - $window.scrollTop();
 var bgMovement = bgImgHeight - divHeight;
 var scrollMovement = windowHeight + divHeight;
 var intPos = scrollPos + divHeight;
 var yPos = ((bgMovement) / (scrollMovement)) * intPos;
 var coords = '50% '+ (-yPos) + 'px';
 $bgobj.css({ backgroundPosition: coords });
 });
 });
 }); 

• GameAlchemist: i don't see the question here. Just do it ! you have allready your computations done : hook the event, do the math, change the .style.pos of the right item(s), preventDefault or stopPropagation if need be, and you're done.
• BoragThungg: Hi Vincent, thanks for the response. I know, you'd think I have everything. I can get everything moving but it's slightly out of sync and that's down to the last bit of the maths. How do I get the bg position to move the correct distance when the div starts at -50 (to 200) and the bg starts at 0 (to -100)? I'm missing something in my maths? These numbers are fictional btw, as it is all being calculated dynamically. Sorry if I'm not making any sense.
• RobG: You haven't explained what you want to do. Do you want the top of the image and div aligned at the bottom of the view port, then as the div is scrolled to the top, have the bottoms aligned as the div leaves the top of the view port (and vice versa)? You also need to show the full calculation that takes account of the distance of the div from the top of the document.
• BoragThungg: Thanks Rob. Yes, that's what I need to do. Here's my code so far, but the yPos calculation is out
• BoragThungg: Sorry Rob, didn't realise I couldn't use code again... Here's a fiddle with just the jquery code jsfiddle.net/RsWbu

Answer 1

With imgWindow the div that contains the image, something like that should be ok :

// get the maximum window scroll 
var deseapearPos = $(window).height() - $('#imgWindow').offset().top;
var imgWindowHeight=('#imgWindow').height();
var imageHeight = 500;
$(window).scroll(function() {
 var currWinPos = $(window).scrollTop();
 if (currWinPos < deseapearPos ) { 
 // if imageWindow still on sight
 var newPos = /* your computation here */
 // ( smthg like newPos = ( imageHeight - imgWindowHeight ) * (currWinPos/ deseapearPos ) );
 $('#imgWindow').scrollTop(newPos);
 }
 });

( imgWindow css style has a overflow: scroll )

• BoragThungg: Thanks Vincent. I'll give that a try when I get in from work.
• BoragThungg: Thanks Vincent. Although what you gave me didn't completely do what I needed, it did make me think more about the div's offset and the window height so your answer is kind of right! My code might not be ultra efficient but it's a good starting point. Thanks again.
• GameAlchemist: glad i could help ! don't forget to put your div inside a wrapper div to hide scrollbars ! like explained here : stackoverflow.com/questions/3293650/…