자바 스크립트/CSS 스크롤 :

Question

개인 사이트에서 작업하고 있는데 문제가 생겼습니다. 내가 요소가보기에 온다 때 CSS 애니메이션을 활성화하기 위해 자바 스크립트를 사용하고 있습니다 : 여기

function isElementInViewport(elem) { 
    var $elem = $(elem); 

    var scrollElem = ((navigator.userAgent.toLowerCase().indexOf('webkit') != -1) ? 'body' : 'html'); 
    var viewportTop = $(scrollElem).scrollTop(); 
    var viewportBottom = viewportTop + $(window).height(); 

    var elemTop = Math.round($elem.offset().top); 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemTop < viewportBottom) && (elemBottom > viewportTop)); 
} 

function checkAnimation() { 
    var $elem = $('.slideUp'); 

    if ($elem.hasClass('start')) return; 

    if (isElementInViewport($elem)) { 
     // Start the animation 
     $elem.addClass('start'); 
    } 
} 

하면 HTML입니다 : 그래서

.slideUp.start { 
    animation-name: slideUp; 
    -webkit-animation-name: slideUp;  

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

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

    visibility: visible !important;   
} 

@keyframes slideUp { 
    0% { 
     transform: translateY(100%); 
    } 
    50%{ 
     transform: translateY(-8%); 
    } 
    65%{ 
     transform: translateY(4%); 
    } 
    80%{ 
     transform: translateY(-4%); 
    } 
    95%{ 
     transform: translateY(2%); 
    }   
    100% { 
     transform: translateY(0%); 
    } 
} 

@-webkit-keyframes slideUp { 
    0% { 
     -webkit-transform: translateY(100%); 
    } 
    50%{ 
     -webkit-transform: translateY(-8%); 
    } 
    65%{ 
     -webkit-transform: translateY(4%); 
    } 
    80%{ 
     -webkit-transform: translateY(-4%); 
    } 
    95%{ 
     -webkit-transform: translateY(2%); 
    }   
    100% { 
     -webkit-transform: translateY(0%); 
    } 
} 

: 여기

<img src="analyze.png" width="343" height="196" alt="Analyze" class="slideUp"> 

와 나의 CSS입니다 나는 이것이 하나의 요소에 대해 작동하도록 할 수 있습니다. 그러나이 클래스를 다섯 개의 요소에 연결하면 첫 번째 요소가 표시되면 모두 다섯 개가 애니메이션을 시작합니다. 각 요소가 동일한 클래스와 동일한 JS 스크립트를 사용하지만 각 요소가 구체적으로 볼 때 움직이는 최상의 방법은 무엇입니까? 나는 몇 가지 시도를했지만 작동하지 않는 것 같습니다. 어떤 제안? 고맙습니다!

Answer 1

편집 : 뷰포트에 애니메이션해야하는 요소를 확인하는 기능을 만들고

우선 DEMO 추가. 이 같은

뭔가 :

function checkAnimation() { 
     var $elems = document.getElementsByClassName("slideUp"); 
     for(var i = 0; i < $elems.length; i++){ 
      if ($('.slideUp').eq(i).hasClass('start')) return; 

      if (isElementInViewport($('.slideUp').eq(i))) { 
      // Start the animation 
      $('.slideUp').eq(i).removeClass('slideUp').addClass('start'); 
      }   
     } 
    } 

그런 다음 기능을 트리거의 jQuery .scroll() 이벤트 핸들러를 사용할 수 있습니다. 이 같은

뭔가 :

$(window).scroll(function() { 
    checkAnimation(); 
}); 

마지막으로, 변화 :

var $elem = $(elem); 

-function isElementInViewport(elem)에가 :

var $elem = elem; 

우리는 이미 선택한 요소를 통과하기 때문이다.

WORKING DEMO