jquery視差位置計算

Question

我想將視差效果應用於可放置在DIV內頁面的任何位置的背景圖像。

我試圖找到「完美」的方程式，以便在文檔滾動時完全（從上到下）看到背景圖像，同時始終充滿圖像填充DIV。

最後，我只是想要一個頁面中間的視差圖像，無論圖像高度和窗口高度如何，總是可以工作。

這裏我的腳本（它的工作原理，但我的計算不照顧完全的窗口高度和圖像高度...）

$("#inner-container").on("scroll", function() { 
    var scrollTop = $(this).scrollTop(); 
    var windowHeight = $(window).height(); 
    $('.parallax-container').each(function() { 
     var parallaxDivPosition = $(this).position().top; 
     var parallaxHeight = $(this).height(); 
     var scrollPosition = scrollTop + windowHeight; 
     if (parallaxDivPosition <= windowHeight && parallaxDivPosition+parallaxHeight >= 0) { 
      var parallaxFactor = parallaxHeight/windowHeight; 
      var parallaxShift = parallaxHeight*parallaxFactor; 
      var parallaxImgPos = parallaxDivPosition-windowHeight; 
      var imagePosition = Math.round(parallaxImgPos-parallaxShift)*0.2; 
      $(this).children().css('-webkit-transform', 'translate3d(0px, '+imagePosition+'px, 0px)'); 
     } 
    }) 
}) 

這裏提琴：http://fiddle.jshell.net/uccE4/12/

Answer 1

我有它。最後，它很簡單（在一張紙上寫兩個方程後!!笑）

$('*').scroll(function() { 
    var windowHeight = $(window).height(); 
    $('.parallax-container').each(function() { 
     var parallaxDivPosition = $(this).position().top; 
     var parallaxHeight = $(this).height(); 
     var parallaxTop = parallaxDivPosition - windowHeight; 
     var parallaxBottom = parallaxHeight + parallaxDivPosition; 
     if (parallaxTop < 0 && parallaxBottom > 0) { 
      var parallaxFactor = 50/(windowHeight+parallaxHeight); 
      var parallaxposition = Math.abs(parallaxTop)*parallaxFactor; 
      $(this).children().css('-webkit-transform', 'translate3d(0px, '+-parallaxposition+'%, 0px)'); 
     } 
    }) 
}) 

所以，當底部格圖像背景是窗口的頂部，我會看到圖像的底部。當頂部div圖像背景是在窗口的底部，我會看到圖像的頂部...

所以無論圖像的高度或窗口的高度，當我滾動時，我總是會顯示整個圖像...