如何不将skrollr-js属性应用于另一个div中的一个div?

我已经创建了两个同心圆,分别是c1和c2。我正在尝试,当用户向下滚动时,圆圈会缩小并消失。我正在使用一个jquery插件“Skrollr js”,我面临的问题是,在圆圈内,我希望内容在屏幕上保持固定,当圆圈消失时,它也会消失。

基本上,我正在尝试重新创建 http://www.evanshalshaw.com/bondcars/index.html 但以非常基本的方式。

<div id="skrollr-body">
<div class="slides">
    <div id="c1" class="circle-mask centred" data-0="transform:scale(2); " data-1000="transform:scale(0);">
     <div class="content">Hello</div>
    </div>
    <div id="c2" class="circle-mask centred" data-1000="transform:scale(2);" data-2000="transform:scale(0);"></div>
</div>
</div>

有关完整代码,请参阅fiddle。

到目前为止,我已经创建了这个: https://jsfiddle.net/LpLq5mLa/

如jsfiddle所示,当我们向下滚动时,“Hello”也在移动,但我希望它保持固定,当圆圈消失时消失。

如果有任何困惑,请参考小提琴。我尽了最大努力编写了一个干净的代码,一个更好的方法将非常感激。非常感谢。

编辑:我在一个div中尝试了内容,并将其放在动画div上方,但它不起作用。