Анимированное увеличение чисел на jQuery + CSS
 | |
| В этом мануале подробно разберем, как создать оригинальный эффект анимированного увеличения чисел, где счет начинается с нуля и быстро набирает численность до заданного чиста, что выставил веб мастер. Безусловно многие встречали такой функционал, он основном применяется на ресурсах, которые предоставляют разные услуги. Возможно еще на многих тематических площадках можно увидеть, но основном там встречал. Но переходим на главному, это сам счетчик, который будет накручивать циферблат. Только в том случай, если вы открыли ресурс, и он на главной, или на отдельной странице, где вы ее посетили. А по умолчанию он не показывает, только при открытии, так сказать в прямой видимости. До этого уже на портале разместил нумерованный список на HTML + CSS, где искал информацию и этот счетчик увидел на одном уроке. Который по своему дизайн, так думаю более должен востребован. Так как можно несколько датчиков поставить, и как видим, здесь предоставлено 2 варианта, где еще можно красиво сделать оформление. Но главное, что все работает, что будет ниже предоставлена Demo страница, где можно посмотреть, как он в реальности будет выглядеть на сайте. Не забываем, что по высоте и ширине можно сделать, как больше так и меньше, включая сами знаки, что в центре поставлены. Плагин jQuery, что позволяет вам подсчитывать или подсчитывать числовое значение анимированным способом с настраиваемым размером шага и задержкой анимации. Так реально выглядит 2 варианта:  Приступаем к установке: HTML Код <div id="kadgados"><span class="lagisnutbeg">319</span></div> <div id="kadgados"><span class="lagisnutbeg">875</span></div> <div id="kadgados"><span class="lagisnutbeg">573</span></div> <div id="kadgados"><span class="lagisnutbeg">234</span></div> <div id="kadgados"><span class="lagisnutbeg">75</span></div> <div id="kadgados"><span class="lagisnutbeg">34</span></div> <div style="clear:both"></div> <div id="dazneksalezka"><span class="lagisnutbeg">1631</span></div> <div id="dazneksalezka"><span class="lagisnutbeg">253</span></div> <div id="dazneksalezka"><span class="lagisnutbeg">95</span></div> CSS Код #kadgados { width: 100px; height: 100px; background: #0041ff; -moz-border-radius: 50px; -webkit-border-radius: 50px; border-radius: 50px; float: left; margin: 7px; border: 2px solid #a7a8a9; } .lagisnutbeg { line-height: 100px; color: #f3eded; margin-left: 32px; font-size: 27px; } #dazneksalezka { width: 115px; height: 78px; background: #096d1f; position: relative; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 18px; float: left; margin: 17px; } #dazneksalezka:before { content: ""; position: absolute; right: 100%; top: 25px; width: 0; height: 0; border-top: 14px solid transparent; border-right: 24px solid #096d1f; border-bottom: 13px solid transparent; } .linker { font-size : 18px; font-color: black; } jQuery Код $('.lagisnutbeg').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 4000, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); }); Встроенный модуль jquery, который анимирует число или ряд чисел от одного значения до другого. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
