使用Skrollr放大背景图像

Question

这篇帖子基于this tutorial，当用户向下滚动页面时，它允许背景图像的大小（从中心）增加。我this test page我创造了尝试做同样的事情。

一个关键区别是我的图片是position: absolute而不是position: fixed。另一个区别是我的图像不应该扩展到它的容器之外，而是使用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>

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

我知道这个教程也涉及不透明度，但我只是在增加背景图像，同时保持中心位于中心时很有趣。