CSS 애니메이션 치트 시트를 사용할 때 Div가 점프합니다.

Question

방금 ​​웹 사이트에 CSS animation cheat sheet을 추가했습니다. 그러나 이제는 애니메이션으로 구현 한 이미지로 스크롤하면 div가 페이지의 맨 아래로 펼쳐집니다. 애니메이션이 끝나면 div 크기가 다시 정상입니다.

이 일어나고 페이지 : http://keessonnema.nl/

HTML :

<div class="wrapper portfolio"> 
    <span class="spacer"></span> 

    <div id="pic-wrap"> 
    <img class="pic" src="http://multy-service.ru/media/pictures/imac-3.png" alt="Imac" width="450px"/> 
    </div> 

    <div class="text-wrap"> 
     <h1> 
      Webdesign sample text 
     </h1> 
     <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed ipsum blandit, tristique risus vel, volutpat rbi at lacus et dolor tincidunt pretium sollicitudin in leo. 
      <a href="">Lees meer...></a> 
     </p> 
    </div> 

CSS :

#pic-wrap{ 
float: right; 
visibility: hidden; 
backface-visibility: hidden; 
} 

JQuery와 :

<script> 
    $(window).scroll(function() { 
     $('.pic').each(function(){ 
     var imagePos = $(this).offset().top; 

     var topOfWindow = $(window).scrollTop(); 
      if (imagePos < topOfWindow+400) { 
       $(this).addClass("slideUp"); 
      } 
     }); 
    }); 
</script> 

하면 probl 수 무엇 여자 이름?

Answer 1

나는 그것을 테스트하기가 어렵다. 나는 항상 페이지를 보지 않으면 안된다. 효과를 보아라, 나는 단지 문제가 무엇인지 추측 할 수있다.

기본 (iMac) 이미지의 크기가 890px 이상이기 때문일 수 있습니다. 더 작은 높이의 이미지를 추가하십시오. 또한 div 슬라이드를 overflow : hidden 및 fixed height/또는 max-height로 설정할 수 있습니다.

편집 :

이

#slide5 { 
z-index: 99999; 
} 

그것이