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

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

Только в том случай, если вы открыли ресурс, и он на главной, или на отдельной странице, где вы ее посетили. А по умолчанию он не показывает, только при открытии, так сказать в прямой видимости.

Так как можно несколько датчиков поставить, и как видим, здесь предоставлено 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.06.2018, 19:12
  • Просмотры: 54
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

Правила публикации комментариев:
1. Запрещено оскорблять, унижать в грубой форме других пользователей.
2. Мат и грубые слова запрещены, даже в скрытой форме, для этого существуют масса слов которые заменяют мат.
3. Запрещено писать ссылки на другие сайты (За исключением официальных сайтов uCoz, например: blog.uсoz.ru)
4. Запрещено флудить и спамить, предлогать услуги (например: рипы, адаптации, помогу с установкой и т.д. )

Комментарии
Добавить комментарий