Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выполнение скрипта при прокрутке до нужного места (https://javascript.ru/forum/dom-window/52196-vypolnenie-skripta-pri-prokrutke-do-nuzhnogo-mesta.html)

Galyanov 07.12.2014 23:44

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

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

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

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

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

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

рони 08.12.2014 00:37

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

Galyanov 08.12.2014 17:16

Спасибо!
Работает. Сделал вот так:
<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 09.03.2016 13:50

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

Цитата:

Сообщение от рони (Сообщение 345403)
Galyanov,
jQuery-viewport-checker позволяет сделать то что вы хотите ... в callbackFunction ставьте запуск своего скрипта ... и ... :cray:

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

рони 09.03.2016 15:37

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

kick 09.03.2016 16:03

Цитата:

Сообщение от рони (Сообщение 410386)
kick,
так попробуйте установить и animateNumber

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

рони 09.03.2016 16:55

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

kick 10.03.2016 08:38

Цитата:

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

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

kick 10.03.2016 09:18

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

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


	});

	    });

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


Часовой пояс GMT +3, время: 10:52.