javascript - 缩放滚动时的视差

Question

我试图找到与此相关的类似帖子，但未能找到。我想要做的是设置一个在滚动时具有适度缩放的视差背景。我降低了视差，这很简单，但是缩放滚动给我带来了困难。

    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");
            }
        });
    });

这是我对图像进行缩放的地方，视差是在纯 CSS 中完成的，如下所示。我遇到的问题是计算数学以确保当屏幕变得过宽或过高时图像不会超出其父级的边缘并且仍然达到相同的效果。 1 :

CSS:

pageCanvas
{
    position: relative;

    background-repeat: no-repeat;
    background-position: center;
    background-size: auto 100%;
    background-color: white;

    display: block;

    left: 0;
    top: 0;

    width: 100%;
    height: 100vh;

}

pageCanvas.parallax
{
    background-attachment: fixed;
}

.

<pageCanvas class="parallax zoomImage" style="background-image: url('./Images/DisplayBackground.png');">
    <banner>
        <header>
            Company name
        </header>
        <description>
            I don't want to<br><span style="margin-left: 200px;">advertise here.</span>
        </description>
    </banner>
</pageCanvas>

我已尝试让它正常工作，但要么遇到以下问题之一: 白色背景显示太宽。 白色背景显示太高。 图像拉伸(stretch)。

我需要用这个或其他东西引入图像原始比率吗？如果我在给出答案之前找出解决方案，我会发布它。

Answer 1

虽然原始答案在命名空间中，但我将把这个答案当作不是因为我没有指定。无论哪种方式，我都找到了解决方案。

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

    $(".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);
        });
    });

为了让生活更轻松，我将它们放在一个对 namespace 来说是全局的数组中。这样我就不必 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 + "%");
        }
    });
}

我把它放在一个函数中，因为否则它会被放在两个不同的位置。 (那只是困惑的编码)。我按如下方式更新了图像大小。

    $(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);
    });

以下资源帮助我解决了我的问题: Can I get div's background-image url? How to get image size from URL

功劳归功于他们。