Asqes,
Вариант запуска счётчика при видимости на экране -- без jquery
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
#target3 {
width: 120px;
height: 40px;
padding: 10px;
background: #000;
font: bold 35px Arial;
color: #fff;
text-align: center;
position: absolute;
top: 500px;
}
</style>
</head>
<body style="height: 2000px; width: 2000px">
<span id="target3" class="free">TEST</span>
<script>
function number_to(id, from, to, duration)
{
var element = document.getElementById(id);
window.clearTimeout(element.timer);
var start = new Date().getTime();
setTimeout(function go()
{
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = Math.floor((to - from) * progress + from);
element.innerHTML = progress < 1? result: to;
element.innerHTML += ' %';
if (progress < 1) element.timer = setTimeout(go, 10)
}, 10
);
}
var elem = document.getElementById('target3')
window.onscroll = function() {
if (checkViewport('target3')) {
if(elem.classList.contains('free')) {
elem.classList.remove('free')
number_to("target3", 0, 95, 2000);
}
// выполнится если элемент хотя бы частично видно
document.title = 'Элемент видно';
document.body.style.backgroundColor = 'red';
} else {
//выполнится если элемент за пределами видимости
elem.classList.add('free')
document.title = 'Элемент не видно';
document.body.style.backgroundColor = 'white';
}
}
function checkViewport(id) {
var $myElement = document.getElementById(id),
landmark = $myElement.getBoundingClientRect(),
visibility = landmark.top + $myElement.scrollHeight > 0 && landmark.left + $myElement.scrollWidth > 0 && landmark.bottom - $myElement.scrollHeight < document.documentElement.clientHeight && landmark.right - $myElement.scrollWidth < document.documentElement.clientWidth
return visibility
}
window.onscroll()
</script>
</body>
</html>
