Выполнение скрипта при прокрутке до нужного места
Здравствуйте.
Есть скрипт анимирующий цифры, скажем от 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 |
Цитата:
|
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); }); }); Не работает. Запускаются самопроизвольно при загрузке страницы((( |
Часовой пояс GMT +3, время: 10:52. |