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

Question

我创建了两个同心圆，分别是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/

如 js 所示fiddle "Hello" 在我们向下滚动时也在移动，但我希望它保持固定并在圆圈消失时消失。

如有混淆请参考fiddle。我尽力编写了一个干净的代码，一个更好的方法将不胜感激。谢谢！

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

Answer 1

缩放正在缩放整个元素及其所有内容。尝试放大 "Hello"。如果这不是一个选项，请将问候从 div

中移出

https://jsfiddle.net/hjLxqvkt/

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

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

How to not apply skrollr js properties to a div inside another div?

html

javascript

css

animation

skrollr