ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированное увеличение чисел на jQuery + CSS

Анимированное увеличение чисел на jQuery + CSS

Анимированное увеличение чисел на jQuery + CSS
В этом мануале подробно разберем, как создать оригинальный эффект анимированного увеличения чисел, где счет начинается с нуля и быстро набирает численность до заданного чиста, что выставил веб мастер. Безусловно многие встречали такой функционал, он основном применяется на ресурсах, которые предоставляют разные услуги. Возможно еще на многих тематических площадках можно увидеть, но основном там встречал. Но переходим на главному, это сам счетчик, который будет накручивать циферблат.

Только в том случай, если вы открыли ресурс, и он на главной, или на отдельной странице, где вы ее посетили. А по умолчанию он не показывает, только при открытии, так сказать в прямой видимости. До этого уже на портале разместил нумерованный список на HTML + CSS, где искал информацию и этот счетчик увидел на одном уроке. Который по своему дизайн, так думаю более должен востребован.

Так как можно несколько датчиков поставить, и как видим, здесь предоставлено 2 варианта, где еще можно красиво сделать оформление. Но главное, что все работает, что будет ниже предоставлена Demo страница, где можно посмотреть, как он в реальности будет выглядеть на сайте. Не забываем, что по высоте и ширине можно сделать, как больше так и меньше, включая сами знаки, что в центре поставлены. Плагин jQuery, что позволяет вам подсчитывать или подсчитывать числовое значение анимированным способом с настраиваемым размером шага и задержкой анимации.

Так реально выглядит 2 варианта:

Счетчик анимированных чисел с помощью jQuery + CSS

Приступаем к установке:

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, который анимирует число или ряд чисел от одного значения до другого.

Демонстрация
23 Июня 2018 Просмотров: 2680 Комментариев: (1)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 1
Kosten
Kosten 13 Октября 2019 01:411
0
Хотя многие люди утверждают, что jQuery больше не актуален, учтите тот факт, что он все еще используется в бесчисленных проектах. Таких, как веб анимация увеличение чисел при открытие или прокрутки страницы на сайте.

Анимация накручивание чисел на сайте
Анимация чисел для сайта на jQuery
Анимация увеличение числа на jQuery + CSS
Создать анимированный счетчик номеров на JQuery
avatar