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>

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

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

如jsfiddle所示，“Hello”在我们向下滚动的同时也在移动，但我想让它保持固定并在圆圈消失时消失。

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

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

Answer 1

缩放是缩放整个元素及其所有内容。尝试缩放＆＃34; Hello＆＃34;起来。如果这不是一个选项，请将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？

1 个答案: