ScrollMagic，反向z索引顺序

ScrollMagic, reverse z-index order

本文关键字：索引 顺序 反向 ScrollMagic      更新时间：2023-09-26

我使用scrollmagic在滚动时切换svg剪辑路径。通常，对于svgs（或div或sections或其他什么），在html中指定的最后一件事是在z索引方面，但您可以在css中更改它。我试着用我的svg做这件事，所以当第一个svg变粗时，另一个在它后面滚动。看起来滚动魔术阻止了我的z索引工作。有什么想法吗？

http://codepen.io/kathryncrawford/pen/BoXOMJ

<div id="scene">
<svg id="svg1" height="500" width="800">
<image id="img1" xlink:href="http://placecage.com/800/500" x="0" y="0" width="800" height="500"/>
<defs>
    <clipPath id="clip1">
        <circle id="circle1" stroke="#000000" stroke-miterlimit="10" cx="400" cy="300" r="300" />
    </clipPath>
</defs>
</svg>
</div>
<div id="scene2">
<svg id="svg2" height="500" width="800">
<image id="img2" xlink:href="http://fillmurray.com/800/500" x="0" y="0" width="800" height="500"/>
<defs>
    <clipPath id="clip2">
        <circle id="circle2" stroke="#000000" stroke-miterlimit="10" cx="400" cy="300" r="300" />
    </clipPath>
</defs>
</svg>
</div>

CSS

#img1 {
clip-path: url(#clip1);
}
#img2 {
clip-path: url(#clip2);
}
#svg1, #circle1{
z-index: 2;
}
#svg2, #circle2{
z-index: 1;
}

Crap，我在发布这篇文章后就明白了。我在包装svg的场景div上将z-index-css声明更改为z-index。奏效了。

http://codepen.io/kathryncrawford/pen/BoXOMJ

#scene{
z-index: 2;
}
#scene2{
z-index: 1;
}
相关文章：