Анимация увеличение числа на jQuery + CSS
 | |
| Это отлично работающий эффект, который при анимации прокручивает цифры, этим с нуля идет увеличение до заданного вами числа или значение. Думаю вы уже не раз встречали такой эффект, когда заходили на сайт, а там по тематике, как пример, сегодня было зарегистрировано или продано, и начался быстрый отчет, что безусловно смотрится современно. Здесь можно сказать, что как правило его применение для вывода заданного циферблата для информации, где пользователь или гость обязательно увидеть, так как он привлекает внимание. Вы изначально можно поставить несколько функций, что по дизайн, то здесь самостоятельно можно вывести красивое оформление. Анимационный CSS преобразуется независимо при помощи метода jQuery. Это работает как любая другая анимационный вывод на jQuery и CSS, где вращаться под определенной скоростью, или увеличить или уменьшить, но изначально сделано, что все знаки отлично просматриваются. Плюс в этом, здесь идет плавная прокрутка, но увеличение чисел проходит быстро, чтоб понять, где все в плюс, а точнее возрастает. В представленной стилистике можно редактировать как вам угодно, здесь больше зависит от самого дизайн, где этот счетчик переменяется. Плагин jQuery отвечает за анимацию приращения числа, когда он становится видимым во время прокрутки, также в первые доли секунды, где начинается разгоняться с нуля возрастать числа. 1. Здесь примерно выставленный эффект, что ведет подсчет:  2. Пример, как этот код позволяет вам точно отображать то, что вы видите на следующем изображении:  3. Так по умолчанию идет материал, где несколько функций перемотки подключено:  Приступаем к установке: HTML Код <ul> <li>Всего онлайн<span class="klademug">37</span></li> <li>Было заказано<span class="klademug">16</span></li> <li>Принятые звонки<span class="klademug">24</span></li> <li>Советы бывалых<span class="klademug">7</span></li> </ul> JS Код $(document).ready(function () { $('.klademug').each(function () { $(this).prop('Counter',0).animate({ Counter: $(this).text() }, { duration: 1500, easing: 'swing', step: function (now) { $(this).text(Math.ceil(now)); } }); }); }); CSS Код ul { list-style-type:none; width: 291px; margin: 18px auto; padding: 0; } ul li { position: relative; display: block; background: #eae1e1; color: #2d2b2b; border-top: 1px solid #c1c1bd; padding: 18px; text-transform: uppercase; border-radius: 1px 1px 1px 1px; border: 1px solid #b0c8f3; } ul li span:before { content: "+"; } ul li span { font-size: 13px; float: right; background: #b3401c; color: #fbf6f6; padding: 4.5px; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; } li.header { background: #797e88; color: #f9f7f6; } Чтоб понятнее было, хотя на картинке все показано, но все же, здесь просто устанавливаете целевой номер, скорость и другие параметры для подсчета до вашего целевого номера каждый раз, когда страница перезагружается. Демонстрация | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
