사용자가 요소를 볼 때 애니메이션을 계산하십시오.

Question

여러 요소에 대해 사용중인 계수 애니메이션은 첫 번째 요소에 대해서만 한 번 시작됩니다.

그리고 또한 html에서 "카운팅 대상"값을 설정하려고합니다. 각 요소에 대해 js에로드 할 수있는 쉬운 방법이 있습니까?

끝내려면 아래로 스크롤하여 div가 표시 될 때부터 애니메이션 시작 카운트를 얻으려고합니다. 시각적으로 보이게되면 애니메이션을 한 번 실행 한 후에 그대로 있어야합니다.

사용자가 가시성에서 요소를 스크롤하는 경우에만 다시 재설정되고 다시 표시되어야하는 경우 다시 시작해야합니다.

아무도 아이디어를 어떻게 풀 수 있습니까?

을 heres 코드 : 당신은 애니메이션을 처음 시작하면 요소에 클래스를 추가 한 다음 사용하여 해당 요소를 선택할 수 있습니다

http://jsfiddle.net/drfux88/aJrj4/32/

function animateValue(id, start, end, duration) { 
    var obj = document.getElementById(id); 
    var range = end - start; 
    var minTimer = 50; 
    var stepTime = Math.abs(Math.floor(duration/range)); 
    stepTime = Math.max(stepTime, minTimer); 
    var startTime = new Date().getTime(); 
    var endTime = startTime + duration; 
    var timer; 

    function run() { 
     var now = new Date().getTime(); 
     var remaining = Math.max((endTime - now)/duration, 0); 
     var value = Math.round(end - (remaining * range)); 
     obj.innerHTML = value; 
     if (value == end) { 
      clearInterval(timer); 
     } 
    } 

    timer = setInterval(run, stepTime); 
    run(); 
} 

animateValue("value", 0, 75, 2000); 

Answer 1

:하지 선택기를. 예를 들어,과 같이 애니메이션 사업부를 선택

다음 나중에

$('.animation_div:not(.animating)'); 

애니메이션이 시작될 때 :

$('.animation_div').addClass('animating');