Анимация при прокрутке
Есть некий блок:
<div class="row">
<div id="year"></div>
<div id="students"></div>
<div id="worked"></div>
</div>
<script>
$('#year').animate({ year: 15/* - начало */ }, {
duration: 2000,
step: function (year){
this.innerHTML = (year).toFixed(0)
}
});
$('#students').animate({ students: 5000/* - начало */ }, {
duration: 2000,
step: function (students){
this.innerHTML = (students).toFixed(0)
}
});
$('#worked').animate({ worked: 1000/* - начало */ }, {
duration: 2000,
step: function (worked){
this.innerHTML = (worked).toFixed(0)
}
});
</script>
В этом блоке происходит увеличение заданных чисел. Как сделать так чтобы увеличение происходило только когда при прокрутке страницы этот блок станет видимым? Можно пример небольшой? |
никто не подскажет?
|
kolhoz,
getBoundingClientRect |
А можно пример как это сделать? Почитал про getBoundingClientRect но не понял как применить к моему случаю
|
|
Пробую так, но все равно анимация начинается сразу при загрузке страницы и к моменту прокрутки до блока заканчивается. Как исправить?
<script>
window.onscroll = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
$('#year').animate({ year: 15/* - начало */ }, {
duration: 5000,
step: function (year){
this.innerHTML = (year).toFixed(0)
}
});
$('#students').animate({ students: 5000/* - начало */ }, {
duration: 5000,
step: function (students){
this.innerHTML = (students).toFixed(0)
}
});
$('#worked').animate({ worked: 1000/* - начало */ }, {
duration: 5000,
step: function (worked){
this.innerHTML = (worked).toFixed(0)
}
});
}
</script>
|
Цитата:
|
я плохо знаю jquery, а сейчас руки не доходят чтобы подучить. Не подскажете какое условие прописать? У меня из-за другой работы сейчас нет времени читать что-то по js
|
Как прописать условие, что блок row видим в браузере?
|
Запуск счётчика в блоке, когда блок станет видимым
kolhoz,
:cray: :cray: :cray: :cray: :cray: любые варианты были у вас перед глазами макет по второй ссылке пост 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>
|
| Часовой пояс GMT +3, время: 17:15. |