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

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

基本上，我试图以一种非常基本的方式重新创建它

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

你好

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

到目前为止，我已经创建了以下内容：

如JSFIDLE中所示，当我们向下滚动时，“Hello”也在移动，但我希望它保持不变，并在圆圈消失时消失

如有任何混淆，请参阅小提琴。我尽我最大的努力写一个干净的代码，一个更好的方式这样做将不胜感激。谢谢大家!

---

编辑：我尝试将内容放在一个div中，并将其放在动画div的上方，但不起作用。

缩放是缩放整个元素及其所有内容。试着放大“你好”这个词。如果这不是一个选项，那么将hello移出div

---

，链接没有work@AlexanderSolonik请看这个。我想出来并在这里使用了它：仍然感谢您的时间和回复！：D

.content {
    position: fixed;
    top: 0;
    left: 0;
    border: 10px inset red;
    z-index: 11;
    width: 100%;
    height: 100%; 
}