2013-10-09 8 views
0

내 애니메이션에 대한 오프셋을 만들려고합니다. 그러면 핀 프레임이 맨 위에 표시되기 시작하고 새 섹션이 뷰포트로 들어가 자마자 애니메이션을 시작합니다.Superscrolloroma offset, 섹션이 뷰포트에 들어갈 때 애니메이션이 시작되어야 함

는 이미 ... (가) 첨부 된 애니메이션의 끝에서 오프셋하지만 그래도 문제가 해결되지

어떤 아이디어를 넣어 시도? 좋아

var controller = $.superscrollorama({ 
     triggerAtCenter: true 
    }); 
     // set duration, in pixels scrolled, for pinned element 
      var pinDur = 6500; 

      // create animation timeline for pinned element 
      var pinAnimations = new TimelineLite(); 
      pinAnimations 
       .append([ 
        TweenMax.to($('#logo'), .5, {css:{left:'34%'}}), 
        TweenMax.to($('#left, #left2'), .5, {css:{top:'-1055px'}}), 
        TweenMax.to($('#right, #right2'), .5, {css:{top:'-1327px'}})       
        ]) 
       .append([ 
        TweenMax.to($('#flash'), .01, {css:{display: 'none'}}) 
        ]) 
       .append([ 
        TweenMax.to($('#flash'), .02, {css:{display: 'block'}}), 
        TweenMax.to($('#logo, #left, #right'), .01, {css:{display:'none'}}), 
        TweenMax.to($('#flash, #frame, #stand, #wrapper'), .02, {css:{backgroundColor:'white'}}), 
        TweenMax.to($('#flash'), .02, {css:{display:'none'}}) 
        ]) 
       .append(TweenMax.to($('#this_pin-frame-unpin'), .5, {css:{top:'100px'}})); 

      // pin element, use onPin and onUnpin to adjust the height of the element 
      controller.pin($('#wrapper'), pinDur, { 
       anim:pinAnimations, 
       onPin: function() { 
        $('#heelwrapper').css('height','100%'); 
       }, 
       onUnpin: function() { 
        $('#wrapper').stop().animate({height: '900px'}, 10); 
       } 
      }); 

답변

0

, 당신은 'onPin 기능을 토륨'에 오프셋을 추가하여 archieve 수 있습니다

onPin: function() { 
    $('#heelwrapper').css('height','100%'); 
}, 
offset: 800 //negative amount of pixels when the animation should start 
0

난 당신이 triggerAtCenter 포함 된 것을 볼 수 : 컨트롤러에서 사실을. triggerAtCenter : false가 사용자의 요구를 충족시키지 못했던 구체적인 이유는 무엇입니까?

triggerAtCenter : 애니메이션은 각 요소의 원점이 스크롤 영역의 중심에있을 때 (true) 트리거합니다. 위/왼쪽 가장자리 (false)로 변경 될 수 있습니다. 기본값 : true

다른 답변의 문제점은 응답 성있는 예를 들면.