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图像背景是窗口的顶部时，我将看到图像的底部。当顶部div图像背景位于窗口底部时，我将看到图像的顶部...

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

jquery视差位置计算

1 个答案: