이 SuperScrollorama 트윈 타임 라인을 추가하는 방법

Question

SuperScrollorama로 총에 애니메이션을 적용하려고합니다. 그 아이디어는 사용자가 아래로 스크롤하면 총이 발사된다는 것입니다. 여기에는 다소 복잡한 트위닝이 포함됩니다. 나는 방아쇠가 당겨지는 것을 이제

https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/index.html

과 망치가 역 회전, 나는 망치 회전에 스냅 할 필요가 : 여기

는 지금까지 (* Firefox에서 가장 잘 작동)이 무엇 : 0 회전 후 : -25. 이 타임 라인을 추가하는 방법을 알 수 없습니다.

<script> 
    $(document).ready(function() { 
     var controller = $.superscrollorama(); 

     controller.addTween(
      '#gun', 
      (new TimelineLite()) 
       .append([ 
        TweenMax.fromTo($('#hammer'), 1, 
         {css:{rotation: 0}, immediateRender:true}, 
         {css:{rotation: -25}, ease:Quad.easeInOut}), 
        TweenMax.fromTo($('#trigger'), 1, 
         {css:{rotation: 0}, immediateRender:true}, 
         {css:{rotation: 40}, ease:Quad.easeInOut}) 
        ]), 
        500, // scroll duration of tween 
        200); // offset? 
    }); 
</script> 

나는 누군가가 내게 줄 수있는 도움을 주셔서 감사합니다 :

여기 내 스크립트입니다. Superscrollorama 사이트에서 최대한 많이 읽었으며 모든 종류의 코드 조각을 살펴 보았습니다. 아직도 그것을 알아낼 수 없습니다.

Answer 1

나는이 게시물이 몇 개월 된 것을보고, 내가 아직 해결책이 없다는 사실을 소개 하겠지만, onComplete가 그것을 처리하는 방법이라고 생각합니다. 적어도 Google 호스트 사이트에는 잘못된 DOM과 리소스가 제대로로드되지 않는 문제가있었습니다. 디버깅에 도움이되는 커뮤니티와 코드를 공유하기 위해 JSFiddle을 사용하는 것이 좋습니다. 귀하의 링크에서 마크 업을 잡으면 제게 문제를 해결할 수있는 몇 안되는 부서가 생겼습니다. 나는 그들이 방금 닫는 태그 (즉, </div>)를 놓쳤다 고 생각하지만 두 가지를 모두 대조하여 비교할 수 있습니다. 또한 jQuery를 두 번 포함시킨 다음 다시 확인하고로드되지 않은 경우로드하는 것처럼 보입니다. 그것 모두를 청소 한 후에 당신이 예상했던대로 수행하는 것 같습니다. 하지만, 계속해서 아래로 스크롤 할 때 발사되는 트리거를 애니메이션화하고 발사 핀을 닫는 방법을 찾는 방법을 찾고 있다고 생각합니다. 나는 매우 비슷한 것을 시도한 후에 실제로 당신의 질문에 비틀 거렸다. 기본적으로 오버플로 DOM 요소에 들어올 때 요소를 페이드 인하려고 할 때 입력/떠날 때 다른 in/out tweens에 대한 개념 증명으로 요소를 남기려고 할 때 되돌아갑니다. 그래서 제가 처음에 말했듯이, onComplete는 당신이 원하는 것일 수 있다고 믿지만, 제가하려고하는 것에 대해 자발적으로 아닙니다. 아직도 확실하지 않을 수도 있습니다. 아마도 다른 사람들이이 문제에 관해 이야기 할 것입니다. 어느 쪽이든, 아래에 내 아이디어가 있습니다. "from"상태가 페이지의 초기화에서 적절하기 때문에 to 메소드로 바꾼 것처럼 fromTo 메소드가 필요한지 확신 할 수 없습니다. onComplete가로드시에 실행되는 이유를 알아낼 수 있으면 문제가 해결되어야합니다. 다행히도, 거의 3 개월이 지나면 아무도 대답을주지 않았으므로이 사실에 대해 더 많은 통찰력을 얻을 수 있습니다. 을 수행하는 경우이 모든 것이 해결 되었으면이 게시물을 업데이트하여 해결 방법을 보여줄 수 있다면 좋을 것입니다.

JSFiddle Link

CSS :

body{ 
    background: url(https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/plus_yellow.png); 
    background-color: #FFFF00; 
    background-repeat:repeat; 
    height: 3000px; 
} 

#gun{ 
    position: fixed; 
} 

#body{ 
    z-index: 2; 
    position: absolute; 
    left: 0px; 
    top: 100px; 
} 

#slide{ 
    position: absolute; 
} 

#slide1{ 
    z-index: 3; 
    position: absolute; 
    left: 91px; 
    top: 7px; 
} 

#slide2{ 
    z-index: 1; 
    position: absolute; 
    left: 735px; 
    top: 95px; 
} 

#barrel{ 
    z-index: 0; 
    position: absolute; 
    left: 371px; 
    top: 25px; 

} 

#hammer{ 
    z-index: 0; 
    position: absolute; 
    left: 63px; 
    top: 60px; 

} 

#trigger{ 
    z-index: 0; 
    position: absolute; 
    left: 345px; 
    top: 64px; 

} 

HTML :

<div id="screen1"> 
<div id="gun"> 
    <img id="body" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/body.svg" alt="body" /> 
    <div id="slide"> 
     <img id="slide1" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide1.svg" alt="slide1" /> 
     <img id="slide2" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/slide2.svg" alt="slide2" /> 
    </div> 
    <div> 
     <img id="barrel" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/barrel.svg" alt="barrel" /> 
     <img id="hammer" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/hammer.svg" alt="hammer" /> 
     <img id="trigger" src="https://googledrive.com/host/0B8V6b1tb9Ds5cDBYTlJpOWhsb1U/new/trigger.svg" alt="trigger" /> 
    </div> 
</div> 

JS :

var controller = $.superscrollorama(), 
handleComplete = function(elem) { 
    console.log('complete', elem); 
    $('#'+elem).css('rotation', 0); 
}; 

controller.addTween($('#gun'), 
    (new TimelineLite()) 
     .append([ 
      TweenMax.to($('#hammer'), 1, 
         {css:{rotation: -25}, onComplete:handleComplete('hammer'), ease:Quad.easeInOut}), 
      TweenMax.to($('#trigger'), 1, 
         {css:{rotation: 40}, onComplete:handleComplete('trigger'), ease:Quad.easeInOut}) 
      ]), 
      500, // scroll duration of tween in pixels 
      200); // offset (helps with timing when needed)