Twroll animation with Scroll Magic

Question

저는 신기한 마법을 사용하기 때문에 장면과 트윈에 익숙해졌습니다. 그래서 나는 아주 기본적인 셋업을 가지고있다.

<section id="sectionPlaceholder" class="section"> 
</section> 
<section id="sectionOne" class="section"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-6"> 
     <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageOne"> 
     </div> 
     <div class="col-md-6"> 
     <img src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" id="imageTwo"> 
     </div> 
    </div> 
    </div> 
</section> 

그것은 본질적으로 두 섹션이다. 첫 번째 것은 자리 표시 자 섹션이므로 애니메이션 트리거를 볼 수 있습니다. 두 번째 섹션에는 두 개의 이미지가 나란히 표시됩니다. 각 섹션은 당신이 아래로 스크롤 할 때, 애니메이션은 당신이 sectionOne을 공격하면 트리거하는 min-height:100vh;

난 당신이 볼 수 있듯이 Codepen

에의 복제를 만들었습니다. 애니메이션이 정확합니다. 본질적으로 이미지의 크기가 동일한 비율로 확대되기를 바랍니다. 부정확 한 점은 섹션을 명중하자마자 애니메이션이 즉시 끝까지 실행된다는 것입니다.

나는 무엇을 했는가? 섹션을 클릭하면 애니메이션이 실행됩니다. 섹션을 아래로 스크롤하면 이미지의 크기가 커집니다. 섹션 하단에 도달하면 눈금이 1.2가됩니다. 즉, 애니메이션이 즉시 섹션을 실행하지 않고 섹션 하단에 도달하면 완료되어야합니다.

그런 다음 다시 스크롤하면 반대가 발생합니다.

희망은 이상적입니다. 내가 본질적으로 찾고있는 것은 이미지가 스크롤링에 의해 제어되도록 scalling되면서, 더 많이 스크롤할수록 이미지가 커진다.

어떻게하면 좋을까요?

감사

Answer 1

당신은 triggerElement 후 duration 설정을 추가 할 수 있습니다, 나는이 예제에서했던 것처럼 당신은 예를 들어, 지속 시간 창 높이를 사용할 수 있습니다.

https://codepen.io/anon/pen/WZZWJX

: 귀하의 경우에는 그

$(function() { 
    var controller = new ScrollMagic.Controller(); 

    var scene = new ScrollMagic.Scene({ 
    triggerElement: "#sectionOne", 
    duration: jQuery(window).height() 
    }) 
    .setTween("#imageOne", 0.5, {scale: 1.2}) 
    .addTo(controller); 

    var scene = new ScrollMagic.Scene({ 
    triggerElement: "#sectionOne", 
    duration: jQuery(window).height() 
    }) 
    .setTween("#imageTwo", 0.5, {scale: 1.2}) 
    .addTo(controller); 
}); 

여기에 직접보기 것