SuperScrollorama를 사용하여 페이지 상단에서 이미지 놓기

Question

SuperScrollorama를 사용하여 단일 페이지 (스크롤링) 웹 사이트에서 많은 애니메이션을 실행합니다. 왼쪽 또는 오른쪽에서 슬라이드하는 모든 이미지와 텍스트가 완벽하게 작동합니다. 문제는 화면 위쪽에서 이미지를 삽입하려고 할 때 이미지가 "앉을"것으로 예상되는 지점까지 사용자가 스크롤하는 전체 시간 동안 이미지가 위아래로 튀어 오를 때입니다 (It

HTML :

<div id="about-pin-div"> 
    <div id="pin-frame-pin" class="pin-frame"><img src="img/about-products.png" style="width: 55%;"></div> 
</div> 

CSS는 원래 위치의 다음)가 유지 한 후 다시 등 백업하는데 어디까지 ... 여기 내 관련 코드입니다에 기본적으로 거슬러 올라갑니다 :

#about-pin-div { position: relative; width: 100%; height: 100%; left: -5%; overflow: hidden; } 
.pin-frame { position: absolute; width: 100%; height: 100%; overflow: hidden; } 
.pin-frame img { margin-top: -200px; } 

JAVASCRIPT : 사전에 어떤 도움

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

     controller.addTween('#about-pin-div', TweenMax.from($('#about-pin-div'), .5, {css:{bottom:'1000px'}, ease:Quad.easeInOut}), 0, 600); 

     // set duration, in pixels scrolled, for pinned element 
      var pinDur = 1000; 
      // create animation timeline for pinned element 
      var pinAnimations = new TimelineLite(); 
      pinAnimations 
       .append(TweenMax.from($('#pin-frame-pin img'), .5, {css:{marginTop:80}})) 

      // pin element, use onPin and onUnpin to adjust the height of the element 
      controller.pin($('#about-pin-div'), pinDur, { 
       anim:pinAnimations, 
       onPin: function() { 
        $('#about-pin-div').css('height','100%'); 
       }, 
       onUnpin: function() { 
        $('#about-pin-div').css('height','100%'); 
       } 
      }); 
}); 

감사합니다!

Answer 1

여기에 여러 가지 문제가 있다고 생각하며이 플러그인으로 인해 겪었던 몇 가지 문제점을 지적하려고합니다.

(1) 의심 스럽다면 핀에 대해 pushFollowers를 끄십시오. 그는이 같은 문제에 자신이 있었기 때문에 노력 자신을

Play through pinned elements in superscrollorama

janpaepke을 반복 계속하지에서

주위에이 작품을 쓰기에 훌륭한 일을했다.

(2) 위치 조정에 여백을 사용하지 마십시오. IE는 때로는 컨텍스트에 따라 여백을 잘못 처리하므로 원하는 방식으로 작동하지 않습니다.

When to use margin vs padding in CSS

는 내가 할 수있는 그것을 설명에서 더 나은 일을합니까.

(3) # about-pin-div의 높이를 조정하기 위해 핀 기능을 트리거 할 필요성을 이해하지 못합니다. 당신은 시작 값을 계속 재설정하고 있습니다. 고정 된 요소의 자동 조정을 보상하려고하지 않는 한 (1)의 해결 방법으로이를 수정해야합니다.