Выполнение скрипта при прокрутке до нужного места

[Galyanov]

Здравствуйте.
Есть скрипт анимирующий цифры, скажем от 0 до 100.
Все работает как надо, НО, надо чтобы он запускался тогда, когда прокрутишь страницу до него. Иначе получается что анимация цифр пошла, а когда докрутишь до блока с цифрами, то анимация уже завершилась.

Пробовал скрипт https://github.com/dirkgroenen/jQuery-viewport-checker
Но он лишь добавляет класс при появлении блока в зоне видимости.
Пробовал добавлять им нужный класс, который используется в скрипте анимации, класс добавляется но анимации не происходит.

Все таки нужно именно запускать скрипт в определенный момент.
И лучше не с указанием сколкьо пикселей прокрутить (т.к. дизайн адаптивный и у каждого экрана это кол-во будет разным) а именно при появлении блока в зоне видимости.

Подскажите пожалуйста как это сделать, кто знает.

P.S.
Или может в чекере как то можно прописать не добавление класса а запуск скрипта?

<script>
        $(document).ready(function(){
            $('.dummy').viewportChecker({
             "запускаем скрипт анимации /animationNumber.js"
        });
        });
</script>

[рони]

Galyanov,
jQuery-viewport-checker позволяет сделать то что вы хотите ... в callbackFunction ставьте запуск своего скрипта ... и ...

[Galyanov]

Спасибо!
Работает. Сделал вот так:

<script>
    $(document).ready(function(){
    $('.statistik').viewportChecker({
        callbackFunction: function(elem, action){
		$('.lines2').animateNumber({ number: 100 },10000);
		$('.lines3').animateNumber({ number: 90 },10000);
		$('.lines1').animateNumber({ number: 5 },5000);
	}, 
});
    });
</script>

[kick]

Товарищи у меня аналогичная ситуация, как у топикстартера. Цель таже-заставить бежать цифирь именно тогда, когда пользователь доскроллит до нужного блока. Одно отличие, я в скриптах вообще ноль. Не подскажете что нужно прописать в этом коде, если скрипт jQuery-viewport-checker я уже установил?

<script type="text/javascript">// <![CDATA[
window.onload=function(){
function number_to(id,from,to,duration)
{
var element = document.getElementById(id);
var start = new Date().getTime();
setTimeout(function() {
var now = (new Date().getTime()) - start;
var progress = now / duration;
var result = Math.floor((to - from) * progress + from);
element.innerHTML = progress < 1 ? result : to;
if (progress < 10) setTimeout(arguments.callee, 10);
}, 10);
}
number_to("example2",10,600,5000);
};


// ]]></script>

Нужно, чтобы скрипт запускался на DIV блоке #example2
Заранее спасибо неравнодушному.

[kick]

Galyanov,
jQuery-viewport-checker позволяет сделать то что вы хотите ... в callbackFunction ставьте запуск своего скрипта ... и ...

Ребят вся надежда на вас..уже весь инет перерыл..своими силами не могу справиться((

[рони]

kick,
так попробуйте установить и animateNumber

[kick]

kick,
так попробуйте установить и animateNumber

Дык они у меня и так замечательно крутятся. Проблема в том, что они начинают крутиться до того, как пользователь их увидит. И когда я дохожу до места с бегущими цифрами, они уже останавливаются на нужном значении. С этой стороны пролем нет)..проблема в том, чтобы они начинали крутиться только когда скроллинг страницы дойдет до нужного мета (в данном случае блока). Я как бэ понимаю, что нужно две строчки кода вставить, чтобы запускать на #example2, но не знаю как))

[рони]

kick,
посмотрите пост 3 ... сделайте элемент с классом statistik а в него ваши циферки

[kick]

kick,
посмотрите пост 3 ... сделайте элемент с классом statistik а в него ваши циферки

Я же объясняю....я не знаю в какое место конструкцию из третьего поста вставлять((( Я не разбираюсь в коде скриптов. Если не сложно применительно к моему скрипту, подскажите, куда код вставлять?

[kick]

Вот так я обернул правильно?

<div class="statistik">
            
            <center><h1><div id="example2"></div></h1></center>
           
           </div>

А код из третьего поста я вынес в отдельный файл и прикрутил вот так

<script src="assets/js/load.js"></script>

И в самом файле load.js я прописал вот так:

$(document).ready(function(){

	    $('.statistik').viewportChecker({

	        callbackFunction: function(elem, action){

	        $('#example2').animateNumber({ number: 600 },10000);


	});

	    });

Не работает. Запускаются самопроизвольно при загрузке страницы(((