使用jQuery创建视差效果

Question

I am trying to create a parallax effect using jQuery. I have 3 boxes on the page and I want to collapse all three div in 1 when user scrolls down and when user scrolls up they should separate again. so I used scroll event for that, I am not able to separate them when user scrolls up side. this is my fiddle link and following is my code: Latest Fiddle http://jsfiddle.net/iiison/nkf4Y/3/ JS:

$(window).scroll(function () {
    var x = $(this).scrollTop();
    if(isVis($('.cnt')[0])){
        var x = $('.lft').offset().left,
        y = $('.rit').offset().left;
        $('.lft').offset({left:($('.lft').offset().left+10)});
        $('.rit').offset({left:($('.rit').offset().left-10)});
        //console.log();
    }
});

I have one more doubt, how to collapse the div at particular position according to different screen width. Fiddle

Answer 1

Would something like this help?

http://jsfiddle.net/Ms7gw/

var lastScrollTop = 0;
var leftBox = $('#left').position();
var rightBox = $('#right').position();

$(window).scroll(function(event){
    var st = $(this).scrollTop();
    $('#right').css({left: rightBox.left + st});
    $('#left').css({left: leftBox.left - st});
    lastScrollTop = st;
});