如何使用skrollr修复另一个div中的div？

Question

我分别创建了两个同心圆，c1和c2。我正在尝试当用户向下滚动时，圆圈缩小并消失。我正在使用一个jquery插件＆＃34; Skrollr js＆＃34;我面临的问题是，在圈内，我希望内容在屏幕上保持固定，随着圈子消失，它也应该消失。

基本上，我试图以非常基本的方式重新创建此https://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>

有关完整代码，请参阅小提琴。

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

如jsfiddle＆＃34; Hello＆＃34;当我们向下滚动时，它也在移动，但我想让它保持固定并在圆圈消失时消失。

如果有任何混淆，请参考小提琴。我尽力写一个干净的代码，这样做的更好方法将非常感激。谢谢！

编辑：我在div中尝试了内容并将其放在动画div之上，但它不起作用。