当你滚动时,我使用scrollmagic来补间svg剪辑路径。通常,对于 svgs(或 div 或节或其他),您在 html 中指定的最后一个内容在 z-index 方面位于顶部,但您可以在 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;
}
最佳答案
糟糕,我在发布这篇文章后才真正明白了这一点。我将 z-index css 声明更改为包装 svgs 的场景 div 上的 z-index。那行得通。
http://codepen.io/kathryncrawford/pen/BoXOMJ
#scene{
z-index: 2;
}
#scene2{
z-index: 1;
}
关于javascript - ScrollMagic,反向 z 索引顺序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34072186/