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