Question

我在滚动时使用scrollmagic来补间svg clippaths。通常使用svgs（或div或section或者其他），你在html中指定的最后一个东西在z-index方面是最重要的，但是你在css中改变它。我尝试用我的svgs做这个，所以当第一个svg补间时，另一个在它后面滚动。似乎scrollmagic阻止了我的z-indexing工作。有任何想法吗？

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

#img1 {
clip-path: url(#clip1);
}

#img2 {
clip-path: url(#clip2);
}

#svg1, #circle1{
z-index: 2;
}

#svg2, #circle2{
z-index: 1;
}

CSS

<select name="advisor">
<?
$sqlQ = "SELECT concat(firstName,' ',lastName) FROM adv WHERE advisor IS NULL";                     
$array=array();
$res = $db->prepare($sqlQ);
$res->execute();

echo("<option>Advisor</option>");

while ($row = $result->fetch(PDO::FETCH_ASSOC))
{
  $array[] = $row;
}
foreach($array as $info)
{
  echo("<option>$info</option>");
}

Answer 1

废话，我在发布此消息之后就知道了。我将z-index css声明更改为包装svgs的场景div上的z-index。那很有效。

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

#scene{
z-index: 2;
}

#scene2{
z-index: 1;
}

ScrollMagic，反向z-index顺序

1 个答案: