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

Здравствуйте.
Есть скрипт анимирующий цифры, скажем от 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 ставьте запуск своего скрипта ... и ... :cray:

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

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

Товарищи у меня аналогичная ситуация, как у топикстартера. Цель таже-заставить бежать цифирь именно тогда, когда пользователь доскроллит до нужного блока. Одно отличие, я в скриптах вообще ноль. Не подскажете что нужно прописать в этом коде, если скрипт 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,
так попробуйте установить и animateNumber

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

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

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

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

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


	});

	    });

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

kick,
а пример полностью сможите сюда О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

привет, всем.
у меня похожая проблема, нашел скрипт где кружочки и цифры крутятся как надо, только сразу как включишь страницу. Подскажите, что нужно сделать, что скрипт срабатывал после того, как человек до него "до крутит"?
вот ссылка на пример https://codepen.io/jasondavis/pen/MKJwgP/

radialIndicator and viewportchecker
 

assistant5599,
в теме есть примеры, у плагинов есть документация ... :(

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">p{
    height: 1000px;
  }

  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.8/jquery.viewportchecker.min.js"></script>
  <script src="https://apollowebstudio.com/labs/js/sugarcrm-pm/js/radialIndicator.min.js"></script>
  <script>
$(function() {
$('#indicatorContainer').radialIndicator({ frameTime : 120,
  barColor: '#87CEEB',
  barWidth: 7,
  radius: 90, // width of circle
  initValue: 40,
  roundCorner: true,
  percentage: true
});

// Getting instance of radial Progress
var radialObj = $('#indicatorContainer').data('radialIndicator');
//now you can use instance to call different method on the radial progress.
//like

$('#indicatorContainer').viewportChecker({
        callbackFunction: function(elem, action){  
        radialObj.animate(60);
  }
});


});
  </script>
</head>

<body> <p></p>
<div class="" id="indicatorContainer"></div>
       <p></p>
</body>
</html>

Спасибо большое за ответ, да еще и кодом. Только проблема еще нужно что бы было несколько кружков. Пробовал по разным способам(прочитанным в интернете) не получается. Помогите

assistant5599, "id" на "class" поменяйте и можете вставлять хоть 10 кружочков.

можно код?

какая проблема продублировать строки 17 - 35 с нужными вам параметрами?

Таки да, просто смены идентифицирующего атрибута не достаточно, однако это не является какой-то проблемой.

<!DOCTYPE html>

<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">p{height: 1000px;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.8/jquery.viewportchecker.min.js"></script>
<script src="https://apollowebstudio.com/labs/js/sugarcrm-pm/js/radialIndicator.min.js"></script>
<script>
$(function(){

	$('.indicatorContainer').each(function(index){
		var $t=$(this);
		$t.radialIndicator({ 
			frameTime:120,
			barColor: '#87CEEB',
			barWidth: 7,
			radius:90, // width of circle
			initValue:40,
			roundCorner:true,
			percentage:true
		});
		$t.viewportChecker({
			callbackFunction:function(elem,action){  
				$(elem).data('radialIndicator').animate(60);
			}
		});
	});

});
</script>
</head>

<body>
	<p></p>
	<div class="indicatorContainer"></div>
	<div class="indicatorContainer"></div>
	<div class="indicatorContainer"></div>
	<p></p>
</body>
</html>

Замечательный пример. У меня похожая проблема. Только не могу понять как сделать разное значение у кружков(разные цифры). В скриптах особо не понимаю. Буду очень признателен за помощь.

Eric77, можно так попробовать (у меня сайт apollowebstudio не открывается, не могу проверить работоспособность):

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">p{height: 1000px;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.8/jquery.viewportchecker.min.js"></script>
<script src="https://apollowebstudio.com/labs/js/sugarcrm-pm/js/radialIndicator.min.js"></script>
<script>
$(function(){

	$('.indicatorContainer').each(function(index){
		var $t=$(this);
		$t.radialIndicator({ 
			frameTime:120,
			barColor: '#87CEEB',
			barWidth: 7,
			radius:90, // width of circle
			initValue:40,
			roundCorner:true,
			percentage:true
		});
		$t.viewportChecker({
			callbackFunction:function(elem,action){  
				$(elem).data('radialIndicator').animate(elem.dataset.value);
			}
		});
	});

});
</script>
</head>

<body>
	<p></p>
	<div class="indicatorContainer" data-value="20"></div>
	<div class="indicatorContainer" data-value="40"></div>
	<div class="indicatorContainer" data-value="60"></div>
	<p></p>
</body>
</html>

radialIndicator или анимация чисел в зоне видимости
 

Nexus,
elem[0]
или так, ниже рабочий, немного откорректированный вариант, предложенный Nexus,

<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">p{height: 1000px;}</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-viewport-checker/1.8.8/jquery.viewportchecker.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/radialIndicator/1.3.1/radialIndicator.min.js"></script>
<script>
$(function(){
    $('.indicatorContainer').each(function(index){
       var $t=$(this), value = $t.data('value');
       $t = $t.radialIndicator({
            frameTime:120,
            barColor: '#87CEEB',
            barWidth: 7,
            radius:90, // width of circle
            initValue: 0,
            roundCorner:true,
            percentage:true
        })
        .viewportChecker({ repeat: true,
            callbackFunction:function(elem,action){
                $t.value(0).animate(value);
            }
        }).data('radialIndicator');
    });

});
</script>
</head>

<body>
    <p></p>
    <div class="indicatorContainer" data-value="20"></div>
    <div class="indicatorContainer" data-value="40"></div>
    <div class="indicatorContainer" data-value="60"></div>
    <p></p>
</body>
</html>

Спасибо! так быстро решили мою проблему. Круто!!!!