Zoom in on background image using Skrollr

Question

This post is based off of this tutorial which allows a background image to increase in size (from the center) as a user scrolls down the page. I have this test page I've created trying to do the same thing.

A key difference is that my image is position: absolute instead of position: fixed. Another difference being that my image should not extend outside of it's container, but use overflow: hidden to crop the extra parts, whereas the tutorial uses a full page.

HTML:

<div class="banner-wrap">
    <div id="top-image" class="featuredImageBanner"
         style="background:url(<?php echo $feat_image; ?>);"
         data-top="opacity:1; width:100%; height:100%; top: 0%; right: 0%; bottom: 0%; left: 0%;"
         data-center="width: 156%; height: 156%; top: -28%; right: -28%; bottom: -28%; left: -28%;">
        <div class="imageText"><?php the_title(); ?></div>
    </div>
</div>

CSS:

#top-image {
    background-position: center center;
    background-right: no-repeat;
    background-size: 100% 100%;
    height:100%;
    width:100%;
    top:0;
    right:0;
    bottom:0;
    left:0;
}

I know the tutorial also deals with opacity, but I'm only interesting in making the background image increase, while keeping the center at the center.