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图像背景是在窗口的底部，我会看到图像的顶部...

所以无论图像的高度或窗口的高度，当我滚动时，我总是会显示整个图像...