Parallax with zoom on scroll

Question

I've tried to find similar posts about this but failed to do so. What I'm trying to do is set up a parallax background that has a moderate zoom upon scrolling. I have the parallax down, that was simple enough, but the zoom on scroll is causing me difficulties.

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

This is where I'm doing the zoom for the image, the parallax is done in pure CSS as represented below. The issue I'm having is figuring out the mathematics to make sure that the image doesn't escape the edge of its parent when the screen gets excessively wide or tall and still achieve the same effect. 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>

I've tried to get it working, but either have an issue with one of the following: White background shows on too wide. White background shows on too tall. Image stretching.

Do I need to bring in the images origin ratio with this or something? If I figure out a solution prior to an answer given, I'll post it.

Answer 1

Although the original was in a namespace, I'm going to place this answer as if it were not because I hadn't specified. Either way, I found the solution.

The first step was finding the ratio of the original image;

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

To make life easier, I placed them in an array that was global to the name space. This is so I don't have to A) keep finding the ratio of the image, and B) can access it similarly to initializing later on. It should be noted that this method would require being called again in the instance there is any more or less '.zoomImage' classes brought into instance, as the array will be incorrect at that point.

What I did next was place the original code that loops the class into a function.

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

I put it into a function because it would have been placed into two separate locations otherwise. (that's just messy coding). I updated the image size as follows.

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

The following sources helped me solve my answer: Can I get div's background-image url? How to get image size from URL

Credit is due to them.