kolhoz,
любые варианты были у вас перед глазами
макет по второй ссылке пост 5
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div{
height: 50px;
margin: 400px 0;
border: 1px dotted gray;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
//"самописный" селектор выбирает все элементы на экране, между "верхом" и "низом"
//(горизонтаьная прокрутка не учитывается, но можно дописать по-аналогии)
(function(){
$.belowthefold = function(element) {
var fold = $(window).height() + $(window).scrollTop();
return fold <= $(element).offset().top;
};
$.abovethetop = function(element) {
var top = $(window).scrollTop();
return top >= $(element).offset().top + $(element).height();
};
$.inviewport = function(element) {
return !$.belowthefold(element) && !$.abovethetop(element);
};
$.extend($.expr[':'], {
"inViewport": function(a){return $.inviewport(a);}
});
})()
var timer = 0 ,
handler = function(){
//var inViewportList = $('div:inViewport'); //набор элементов, видимых в окне браузера
//делайте с ними что хотите
//ваш код
$('#year:inViewport').animate({ year: 15/* - начало */ }, {
duration: 5000,
step: function (year){
this.innerHTML = (year).toFixed(0)
}
});
$('#students:inViewport').animate({ students: 5000/* - начало */ }, {
duration: 5000,
step: function (students){
this.innerHTML = (students).toFixed(0)
}
});
$('#worked:inViewport').animate({ worked: 1000/* - начало */ }, {
duration: 5000,
step: function (worked){
this.innerHTML = (worked).toFixed(0)
}
});
};
handler();
//вызывает "handler" с задержкой (500 мс) после "каждого скролла"
//если успел прокрутить дальше, то обрабатывается только "второй скролл" и т.д.
//очень удобно - меньше вычислений - меньше нагрузка на браузер
$(window).scroll(function(){
if(timer){
clearTimeout(timer);
timer = 0;
}
timer = setTimeout(handler, 500);
});
});
</script>
</head>
<body>
<div id='year'></div>
<div id='students'></div>
<div id='worked'></div>
</body>
</html>