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>

我试图使其正常运行，但是其中一个存在以下问题：白色背景显示太宽。白色背景显示太高。图像拉伸。

我需要以此来引入图像原始比率吗？如果在给出答案之前找出解决方案，我将其发布。

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

为了使生活更轻松，我将它们放置在名称空间全局的数组中。这样一来，我不必（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

应归功于他们。

视差滚动放大

1 个答案: