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

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

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

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

Как пример:

Простая анимация увеличения числа при заходе на сайт

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

Счетчик-Вверх: 1 вариант

Простая анимация увеличения чисел на сайте при помощи CSS

Материал для HEAD


HTML

Код
<div class="container">
  <div class="row">
  <div class="col-md-4">
  <h1><span class="counter">2,523</span></h1>
  <h3>Клиенты</h3>
  <i class="fa fa-users"></i>
  </div>
  <div class="col-md-4">
  <h1><span class="counter">63,075</span></h1>
  <h3>Веб-Страницы</h3>
  <i class="fa fa-desktop"></i>
  </div>
  <div class="col-md-4">
  <h1><span class="counter">12,218</span></h1>
  <h3>Чашка кофе</h3>
  <i class="fa fa-coffee"></i>
  </div>
  </div>
</div>

CSS

Код
.col-md-4 {
  text-align: center;
  padding-bottom: 50px;
  border-right: 1px dashed black;
}

.col-md-4:last-child {
  border-right: 0px solid black;
}

.counter {
  animation-duration: 1s;
  animation-delay: 0s;
}

i {
  font-size: 20px !Important;
}

@media (max-width: 991px) {
  .col-md-4 {
  border-right: 0px dashed black;
  border-bottom: 1px dashed black;
  width: 50%;
  margin: auto auto;
  }
   
  .col-md-4:last-child {
  border-bottom: 0px dashed black;
  }
}

JS

Код
$('.counter').counterUp({
  delay: 10,
  time: 2000
});
$('.counter').addClass('animated fadeInDownBig');
$('h3').addClass('animated fadeIn');

Этот простой и надежный отсчет отлично подходит для добавления часов обратного отсчета в ваш веб-проект.

Демонстрация

Счетчик статистики: 2 вариант

Подсчет чисел с участием анимации CSS + JS

Материал для HEAD


HTML

Код
<section id="counter-stats" class="wow fadeInRight" data-wow-duration="1.4s">
  <div class="container">
  <div class="row">

  <div class="col-lg-3 stats">
  <i class="fa fa-code" aria-hidden="true"></i>
  <div class="counting" data-count="900000">0</div>
  <h5>Строки кода</h5>
  </div>

  <div class="col-lg-3 stats">
  <i class="fa fa-check" aria-hidden="true"></i>
  <div class="counting" data-count="280">0</div>
  <h5>Выполненные проекты</h5>
  </div>

  <div class="col-lg-3 stats">
  <i class="fa fa-user" aria-hidden="true"></i>
  <div class="counting" data-count="75">0</div>
  <h5>Счастливые клиенты</h5>
  </div>

  <div class="col-lg-3 stats">
  <i class="fa fa-coffee" aria-hidden="true"></i>
  <div class="counting" data-count="999">0</div>
  <h5>Чашки кофе</h5>
  </div>
</div>
  </div>

</section>

CSS

Код
section#counter-stats {
  display: flex;
  justify-content: center;
  margin-top: 100px;
}

.stats {
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
}

.stats .fa {
  color: #008080;
  font-size: 60px;
}

JS

Код
$('.counting').each(function() {
  var $this = $(this),
  countTo = $this.attr('data-count');
   
  $({ countNum: $this.text()}).animate({
  countNum: countTo
  },

  {

  duration: 3000,
  easing:'linear',
  step: function() {
  $this.text(Math.floor(this.countNum));
  },
  complete: function() {
  $this.text(this.countNum);
  //alert('finished');
  }

  });  

});

Самое замечательное в этом эффекте то, что числа все равно будут отображаться в правильном положении для браузеров, которые не поддерживают CSS-анимацию.

Демонстрация

Счетчик jQuery для подсчета до целевого числа

Плавное увеличение числа с помощью jQuery

Вы можете часто видеть их на сайтах агентств и в портфолио, и даже в простых разделах сайта, который предлагает различные счетчики. Где все аналогично выстроено, где вам нужно указать целевое число, до которого счетчик должен рассчитывать.

Материал для HEAD

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">

HTML

Код
<div class="wrapper">
  <div class="counter col_fourth">
  <i class="fa fa-code fa-2x"></i>
  <h2 class="timer count-title count-number" data-to="300" data-speed="1500"></h2>
  <p class="count-text ">Некоторые тексты здесь</p>
  </div>

  <div class="counter col_fourth">
  <i class="fa fa-coffee fa-2x"></i>
  <h2 class="timer count-title count-number" data-to="1700" data-speed="1500"></h2>
  <p class="count-text ">Некоторые тексты здесь</p>
  </div>

  <div class="counter col_fourth">
  <i class="fa fa-lightbulb-o fa-2x"></i>
  <h2 class="timer count-title count-number" data-to="11900" data-speed="1500"></h2>
  <p class="count-text ">Некоторые тексты здесь</p>
  </div>

  <div class="counter col_fourth end">
  <i class="fa fa-bug fa-2x"></i>
  <h2 class="timer count-title count-number" data-to="157" data-speed="1500"></h2>
  <p class="count-text ">Некоторые тексты здесь</p>
  </div>
</div>

CSS

Код
.col_half { width: 49%; }
.col_third { width: 32%; }
.col_fourth { width: 23.5%; }
.col_fifth { width: 18.4%; }
.col_sixth { width: 15%; }
.col_three_fourth { width: 74.5%;}
.col_twothird{ width: 66%;}
.col_half,
.col_third,
.col_twothird,
.col_fourth,
.col_three_fourth,
.col_fifth{
  position: relative;
  display:inline;
  display: inline-block;
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}
.end { margin-right: 0 !important; }
/* Конец сетки столбцов */

.wrapper { width: 980px; margin: 30px auto; position: relative;}
.counter { background-color: #ffffff; padding: 20px 0; border-radius: 5px;}
.count-title { font-size: 40px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.count-text { font-size: 13px; font-weight: normal; margin-top: 10px; margin-bottom: 0; text-align: center; }
.fa-2x { margin: 0 auto; float: none; display: table; color: #4ad1e5;  
}

JS

Код
(function ($) {
  $.fn.countTo = function (options) {
  options = options || {};
   
  return $(this).each(function () {
  // установить параметры для текущего элемента
  var settings = $.extend({}, $.fn.countTo.defaults, {
  from: $(this).data('from'),
  to: $(this).data('to'),
  speed: $(this).data('speed'),
  refreshInterval: $(this).data('refresh-interval'),
  decimals: $(this).data('decimals')
  }, options);
   
  // сколько раз обновлять значение и сколько увеличивать значение при каждом обновлении
  var loops = Math.ceil(settings.speed / settings.refreshInterval),
  increment = (settings.to - settings.from) / loops;
   
  // ссылки и переменные, которые будут меняться с каждым обновлением
  var self = this,
  $self = $(this),
  loopCount = 0,
  value = settings.from,
  data = $self.data('countTo') || {};
   
  $self.data('countTo', data);
   
  // если можно найти существующий интервал, сначала очистите его
  if (data.interval) {
  clearInterval(data.interval);
  }
  data.interval = setInterval(updateTimer, settings.refreshInterval);
   
  // инициализировать элемент начальным значением
  render(value);
   
  function updateTimer() {
  value += increment;
  loopCount++;
   
  render(value);
   
  if (typeof(settings.onUpdate) == 'function') {
  settings.onUpdate.call(self, value);
  }
   
  if (loopCount >= loops) {
  // удалить интервал
  $self.removeData('countTo');
  clearInterval(data.interval);
  value = settings.to;
   
  if (typeof(settings.onComplete) == 'function') {
  settings.onComplete.call(self, value);
  }
  }
  }
   
  function render(value) {
  var formattedValue = settings.formatter.call(self, value, settings);
  $self.html(formattedValue);
  }
  });
  };
   
  $.fn.countTo.defaults = {
  from: 0, // номер, с которого должен начинаться элемент
  to: 0, // номер, на котором должен заканчиваться элемент
  speed: 1000, // сколько времени нужно, чтобы считать между целевыми числами
  refreshInterval: 100, // как часто элемент должен обновляться
  decimals: 0, // количество отображаемых десятичных знаков
  formatter: formatter, // обработчик для форматирования значения перед рендерингом
  onUpdate: null, // метод обратного вызова для каждого элементаupdated
  onComplete: null // метод обратного вызова, когда элемент заканчивает обновление
  };
   
  function formatter(value, settings) {
  return value.toFixed(settings.decimals);
  }
}(jQuery));

jQuery(function ($) {
  // custom formatting example
  $('.count-number').data('countToOptions', {
  formatter: function (value, options) {
  return value.toFixed(options.decimals).replace(/\B(?=(?:\d{3})+(?!\d))/g, ',');
  }
  });
   
  // запустить все таймеры
  $('.timer').each(count);  
   
  function count(options) {
  var $this = $(this);
  options = $.extend({}, options || {}, $this.data('countToOptions') || {});
  $this.countTo(options);
  }
});

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

Демонстрация

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

Примечание: Если фрагменты кода приводят к другому результату на вашем сайте, это может быть связано с тем, что параметры на вашем сайте отличаются или из-за каких-либо настроек, уже добавленных для достижения аналогичного результата. Попробуйте удалить ваши настройки, если таковые имеются, и не стесняйтесь изменять значения в примерах кодов в соответствии с вашим дизайном.
2020-07-23 Загрузок: 1 Просмотров: 496 Комментарий: (2)

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

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

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

Комментарий: 2
Koneko
Koneko 2020-07-23 22:191
0
Привет. Неплохой скрипт. 41b
Kosten
Kosten 2020-07-23 22:472
0
Рекомендую третий вариант, там только нужно библиотеку подключить и шрифтовые знаки. Но первые 2 варианта, то файлов JS с подключением идет больше, как и CSS стилей.
avatar