Анимация при прокрутке
Есть некий блок:
<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> |
Спасибо. А вообще сколько недель месяцев нужно для изучения js учитывая что основы программирования и азы знает человек?
|
kolhoz,
современные средства поиска информации позволяют изучить за 2 месяца, но написание кода процесс неизмеримый :write: |
Часовой пояс GMT +3, время: 16:12. |