如何在頁面向下滾動時將兩個元素分開？

Question

有人可以幫助建議一個好方法來實現以下請？

我想兩個重疊的圖像（其實並不重要，他們是圖像）分開幻燈片作爲頁面滾動下來，他們映入眼簾，並幻燈片一起回來，因爲他們走出去的視圖。想想一個zip的工作原理。

從另一個腳本，我認爲它可以通過調整實現下面的，但我仍然不能圍繞它讓我的頭：

var top = $('.container').offset().top - parseFloat($('.container').css('margin-top').replace(/auto/, 0)); 
$(window).scroll(function (event) { 
var y = $(this).scrollTop(); 
if (y >= top) { 
    $('.imageA').addClass('moveLeft'); 
    $('.imageB').addClass('moveRight'); 
    } 
else { 
    $('.imageA').removeClass('moveLeft'); 
    $('.imageB').removeClass('moveRight'); 
    } 
}); 

但隨着.container映入眼簾，這將只是一次觸發事件。

我該怎麼做才能讓容器滾動查看越多，圖像之間的距離越大？

Answer 1

你只是設置/刪除一個類，所以你不會得到動畫運動。您應該嘗試設置相對於y變量的位置或邊距。

簡單的例子來給你一個想法：

.left { 
    width: 100px; 
    height: 100px; 
    background-color: #f99; 
    position: absolute; 
    right: 50%; 
    bottom: 0; 
} 

.right { 
    width: 100px; 
    height: 100px; 
    background-color: #9f9; 
    position: absolute; 
    left: 50%; 
    bottom: 0; 
} 

$(window).scroll(function (event) { 
    var y = $(this).scrollTop(); 
    $('.left').css('marginRight', y/5); 
    $('.right').css('marginLeft', y/5); 
}); 

見的jsfiddle here