Javascript 滚动缩放视差

我试图找到类似的帖子，但没有找到。我想做的是设置一个视差背景，在滚动时有一个适度的变焦。我把视差调低了，这很简单，但是卷轴上的变焦给我带来了困难

    if ($(".zoomImage").length == 0)
    {
        console.warn("You're attempting to set hero images without an existing class. '.heroImage'");
        return;
    }

    $(document).scroll(function(){
        var scrollpos = $(this).scrollTop();
        var screenHeight = $(window).height();
        var screenWidth = $(window).width();

        $(".zoomImage").each(function(){
            var offset = $(this).offset().top;

            // Only modify when top is at top of browser on screen.
            if (offset < scrollpos && scrollpos < offset + screenHeight)
            {
                var heroEffectPerc = 100 + 25 * (scrollpos - offset) / (screenHeight * 1.0);

                $(this).css("background-size",  heroEffectPerc + "% auto");
            }
        });
    });

公司名称
我不想在这里做广告。

我已尝试使其工作，但其中一个与以下问题有关： 白色背景显示太宽。 白色背景显示在太高的屏幕上。 图像拉伸

---

我需要用这个或什么东西来输入图像的原始比率吗？如果我在给出答案之前找到了解决方案，我会发布它

尽管原始答案位于名称空间中，但我将把这个答案放在一个好像不是的位置，因为我没有指定。不管怎样，我都找到了解决办法

第一步是找到原始图像的比率

    $(".zoomImage").each(function(index){
        var bg = $(this).css('background-image');
        bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");

        // get image size.
        var tmpImg = new Image();
        tmpImg.src=bg;
        $(tmpImg).one('load', function(){
          orgWidth = tmpImg.width;
          orgHeight = tmpImg.height;
          bgImageRatios[index] = orgHeight / (orgWidth * 1.0);
        });
    });

为了让生活更轻松，我将它们放在了一个数组中，该数组是名称空间的全局数组。这样我就不必A）一直寻找图像的比率，B）可以访问它，类似于稍后初始化。需要注意的是，此方法需要在实例中再次调用，因为实例中有更多或更少的“.zoomImage”类，因为此时数组将不正确

接下来我要做的是将类循环到函数中的原始代码放在一起

function zoomImage(scrollpos, screenHeight, screenWidth)
{
    //console.log(screenHeight);
    $(".zoomImage").each(function(index){
        var offset = $(this).offset().top;

        if (offset < scrollpos && scrollpos < offset + screenHeight)
        {
            var heroEffectPerc = 100 + 25 * (scrollpos - offset) / (screenHeight * 1.0);

            if ((bgImageRatios[index] * screenWidth / screenHeight) > 1)
                $(this).css("background-size",  heroEffectPerc + "% auto");
            else
                $(this).css("background-size",  "auto " + heroEffectPerc + "%");
        }
    });
}

以下来源帮助我解决了我的答案：

功劳归于他们

    $(".zoomImage").each(function(index){
        var bg = $(this).css('background-image');
        bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");

        // get image size.
        var tmpImg = new Image();
        tmpImg.src=bg;
        $(tmpImg).one('load', function(){
          orgWidth = tmpImg.width;
          orgHeight = tmpImg.height;
          bgImageRatios[index] = orgHeight / (orgWidth * 1.0);
        });
    });

function zoomImage(scrollpos, screenHeight, screenWidth)
{
    //console.log(screenHeight);
    $(".zoomImage").each(function(index){
        var offset = $(this).offset().top;

        if (offset < scrollpos && scrollpos < offset + screenHeight)
        {
            var heroEffectPerc = 100 + 25 * (scrollpos - offset) / (screenHeight * 1.0);

            if ((bgImageRatios[index] * screenWidth / screenHeight) > 1)
                $(this).css("background-size",  heroEffectPerc + "% auto");
            else
                $(this).css("background-size",  "auto " + heroEffectPerc + "%");
        }
    });
}

    $(window).on("resize", function(){
        var scrollpos = $(document).scrollTop();
        var screenHeight = $(this).height();
        var screenWidth = $(this).width();

        pageCanvas.zoomImage(scrollpos, screenHeight, screenWidth);
    });

    $(document).on("scroll", function(){

        var scrollpos = $(this).scrollTop();
        var screenHeight = $(window).height();
        var screenWidth = $(window).width();

        pageCanvas.zoomImage(scrollpos, screenHeight, screenWidth);
    });