애니메이션 및 하단 스크롤 막대 숨기기

Question

애니메이션에서 왼쪽 슬라이드가있는 사이트에서 작업하고 있습니다. 활성화하면 하단에 스크롤 막대가 나타나 페이지가 위아래로 조금씩 이동합니다. 스크롤 막대를 없애거나 애니메이션 코드를 변경하여 멈추게 할 수 있습니까?

크롬 & IE는 괜찮지 만 Firefox는 급격한 변화입니다.

사이트는 다음과 같습니다 http://inventivewebdesign.com/ndr/

HTML

<div id="ftr-tagline"> 
    <div class="slideLeft" id="ftr1-animation"> 
     <div class="one-third first"> 
      <div class="one-call"> 
       One Call... 
      </div><!-- .one-call --> 
     </div><!-- .one-third --> 
    </div><!-- #ftr1-animation --> 
    <div class="slideLeft" id="ftr2-animation"> 
     <div class="one-third"> 
      <div class="one-contact"> 
       One Contact... 
      </div><!-- .one-contact --> 
     </div><!-- .one-third --> 
    </div><!-- #ftr2-animation --> 
    <div class="slideLeft" id="ftr3-animation"> 
     <div class="one-third last"> 
      <div class="one-culture"> 
       One Culture... 
      </div> <!-- .one-contact --> 
     </div><!-- .one-third --> 
    </div> <!-- #ftr3-animation --> 
</div> 

CSS

/* 
============================================== 
slideLeft 
============================================== 
*/ 


.page-id-4 #ftr1-animation, .page-id-4 #ftr2-animation, .page-id-4 #ftr3-animation{ 
    visibility: hidden; 
} 
.page-id-4 .slideLeft{ 
    animation-name: slideLeft; 
    -webkit-animation-name: slideLeft; 

    animation-duration: 1s; 
    -webkit-animation-duration: 1s; 

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;  

    /* Keep animation visible after animation finishes */ 
    animation-fill-mode: forwards; 
    -webkit-animation-fill-mode: forwards; 
} 

@keyframes slideLeft { 
    0% {transform: translateX(150%);} 
    100% {transform: translateX(0%); 
    visibility: visible;} 
} 

@-webkit-keyframes slideLeft { 
    0% {-webkit-transform: translateX(150%);} 
    100% {-webkit-transform: translateX(0%); 
    visibility: visible;} 
} 


.page-id-4 #ftr1-animation{ 
    -webkit-animation-delay: 2s; /* Safari and Chrome */ 
    animation-delay: 2s; 
} 
.page-id-4 #ftr2-animation{ 
    -webkit-animation-delay: 3s; /* Safari and Chrome */ 
    animation-delay: 3s; 
} 
.page-id-4 #ftr3-animation{ 
    -webkit-animation-delay: 4s; /* Safari and Chrome */ 
    animation-delay: 4s;  
} 

Answer 1

가장 쉬운 방법은 요소의 부모에 오버 플로우를 숨기는 것 슬라이딩.

당신이 멀리 얻을 수

#ftr-tagline{ 
    overflow: hidden; 
} 

또는 경우 :

로

html, body{ 
    overflow-x: hidden; 
}