元素对用户可见时的动画计数

我有一个问题，我现在在多个元素上使用的计数动画，第一个元素只开始一次。

我还试图在html中设置"计数到"值。有没有一种简单的方法可以将它们加载到每个元素的js中？

最后，当div对用户可见时，我试图通过向下滚动来启动向上计数动画。当它可见时，它应该在运行动画一次后保持原样。

只有当用户将元素滚动到可见性之外时，它才应该重置并在再次可见时重新启动。

有人知道我该怎么解决吗？

代码在这里：

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);