Анимация увеличение числа на jQuery + CSS

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

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

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

1. Здесь примерно выставленный эффект, что ведет подсчет:

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

2. Пример, как этот код позволяет вам точно отображать то, что вы видите на следующем изображении:



3. Так по умолчанию идет материал, где несколько функций перемотки подключено:

Эффекты анимация с числами на перемотки

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

HTML

Код

  <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;
}


Чтоб понятнее было, хотя на картинке все показано, но все же, здесь просто устанавливаете целевой номер, скорость и другие параметры для подсчета до вашего целевого номера каждый раз, когда страница перезагружается. 


  • Дата: 22.06.2018, 23:05
  • Просмотры: 49
  • Отзывы: 0
Автор материала
...
...
...
...
Поделиться в социальных сетях

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

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