2014-09-22 2 views
1

얼마 동안 사진을 일시 중지하려고합니다. 조금 스크롤 한 후에 그림 (part1)이 사라져야 기본 그림이 나타납니다. 좀 더 스크롤 한 후에 양쪽 모두 스크롤 아웃해야합니다.ScrollMagic Pin and reveal issue

메신저 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> 

답변

0

첫 번째 이미지 만 핀 대상으로 사용하는 경우 첫 번째 이미지 만 고정됩니다. 012h는 핀이 완성 될 때까지 두 번째 이미지를 아래로 밀어 넣습니다.

위에서 설명한 효과를 얻으려면 두 이미지의 컨테이너 (경우에 따라 섹션)를 고정해야합니다. 그런 다음 원하는대로 이미지를 페이드 아웃하십시오. 첫 번째 이미지를 position: absolute으로 설정하고 Z- 색인을 올리십시오.