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

Question

I have created two concentric circles, c1 and c2 respectively. I am trying that as user scroll down, the circle shrinks and vanishes. I am using a jquery plugin "Skrollr js" and the problem I am facing is that inside the circle I want the content to be stay fixed on the screen and as circle vanishes it should vanish too.

Basically, I am trying to re-create this http://www.evanshalshaw.com/bondcars/index.html but in a very basic manner.

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

For full code, please see the fiddle.

I have created this so far : https://jsfiddle.net/LpLq5mLa/

As shown in jsfiddle "Hello" is moving too as we scroll down but I want it to remain fix and disappear when circle vanishes.

Please refer to the fiddle if any confusion. I tried my best to write a clean code, a better way to do so will be much appreciated. Thank you!

Edit : I tried content in a div and putting it above the animated div but it doesn't work.

Answer 1

Scale is scaling the whole element and all its contents. Try scaling the "Hello" up. If that's not an option, move the hello out of the div

https://jsfiddle.net/hjLxqvkt/

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