» »

Анимация чисел для сайта на jQuery

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

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

Все проверено на работоспособность:

Простая анимация увеличения/уменьшения чисел на jQuery

Установочный процесс:

В HEAD подключаем библиотеку и шрифты с файлами js.

Код
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script>

HTML

Код
<div class="middle">
  <div class="counting-sec">
  <div class="inner-width">
  <div class="col">
  <i class="far fa-smile-wink"></i>
  <div class="num">564</div>
  Скрипты для сайта
  </div>

  <div class="col">
  <i class="fas fa-briefcase"></i>
  <div class="num">83</div>
  Шаблоны
  </div>

  <div class="col">
  <i class="far fa-money-bill-alt"></i>
  <div class="num">375</div>
  Дизайн сайта
  </div>

  <div class="col">
  <i class="far fa-object-group"></i>
  <div class="num">326</div>
  Стилистика
  </div>
  </div>
  </div>
  </div>

CSS

Код
body{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
}
.middle{
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
}
.counting-sec{
  padding: 40px 0;
  width: 100%;
  background: linear-gradient(90deg,#3c6382,#82ccdd);
}
.inner-width{
  max-width: 1200px;
  margin: auto;
  display: flex;
}
.col{
  flex: 1;
  text-align: center;
  padding: 20px;
  color: #fff;
  text-transform: uppercase;
}
.col i{
  font-size: 40px;
  color: #333;
}
.num{
  font-size: 40px;
  margin: 20px 0;
}

JS

Код
$(".num").counterUp({delay:10,time:1000});

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

Видео обзор:

2019-10-12 Загрузок: 1 Просмотров: 300 Комментарий: (1)

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

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

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

Комментарий: 1
Kosten
Kosten 2019-10-13 01:321
0
Рекомендую посмотреть аналогичный по своим функциям небольшой набор материалов на jQuery для анимации прокрутки с приращением числа, когда он становится видимым при прокрутке. Где также в коде HTML напишите число которое при прокрутки появится, чтобы получить анимацию видимой на экране во время прокрутки.

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