Параллакс с увеличением на свитке

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

Чтобы упростить жизнь, я поместил их в массив, глобальный для пространства имен. Это значит, что мне не нужно: а) постоянно находить соотношение изображения, и б) получить к нему доступ аналогично инициализации позже. Следует отметить, что этот метод потребует повторного вызова в том случае, если в экземпляр добавлены более или менее классы «.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);
    });

Следующие источники помогли мне решить мой ответ: Могу ли я получить ссылку на фоновое изображение div? Как получить размер изображения с URL

Кредит принадлежит им.