ScrollMagic引腳和顯示問題

我試圖暫停圖片一段時間。滾動一下之後，圖片（part1）應該淡出並顯示底層圖片。在更多的滾動之後，兩者都應該滾動出來。ScrollMagic引腳和顯示問題

即時通訊使用http://janpaepke.github.io/ScrollMagic但不知何故釘扎和動畫的組合不起作用。

<body> 
<script> 
    var controller; 
    $(document).ready(function($) {  
     controller = new ScrollMagic(); 
    }); 
</script> 

<div id="trigger1"></div> 
<section> 
    <img id="part1" src="img/part1.jpg" height="950" width="" /> 
    <img id="part2" src="img/part1.jpg" height="950" width="" /> 
</section> 

<div class="spacer s10"></div> 
<div id="trigger2"></dv> 

<script> 
    $(document).ready(function($) { 

     var scene = new ScrollScene({triggerElement: "#trigger1", duration: 1600}) 
         .setPin("#part1") 
         .addTo(controller); 

     var scene = new ScrollScene({triggerElement: "#trigger2"}) 
         .setTween(TweenMax.to("#part1", 2, {opacity: 0})) 
         .addTo(controller); 

     // show indicators (requires debug extension) 
     scene.addIndicators(); 
    }); 
</script> 
</body>

來源

2014-09-22 Mike

如果您只使用第一張圖片作爲引腳目標，則只會鎖定第一張圖片。（duh）
這會導致第二個圖像被按下直到引腳完成。

爲了達到上述效果，您需要將兩個圖像的容器（在本例中爲部分）固定在一起。然後按照您的期望淡出圖像。確保將第一張圖像設置爲position: absolute並提升z-index。

希望這會有幫助，
J

來源

2014-10-06 13:53:31

ScrollMagic引腳和顯示問題

回答

相關問題