Javascript 使用Skrollr放大背景图像

这篇文章的基础是，当用户向下滚动页面时，背景图像的大小（从中间）可以增加。我有我创造的尝试做同样的事情

一个关键区别是我的图像是

位置：绝对的

，而不是

位置：固定的

。另一个区别是，我的图像不应该扩展到它的容器之外，而是使用

overflow:hidden

来裁剪额外的部分，而教程使用了一整页

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>

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