» »

Анимация накручивание чисел на сайте

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

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

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

Проверено по работоспособности, где ниже есть ссылка на demo страницу.

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

Здесь в скрипте выставил пробег до этой цифры "var $numero = 1427;" и как понимаете, вы сами ставите, то число, которое вам нужно, что будет быстро накручивать до заданного вами численности.

Счетчик анимированных чисел jQuery от нуля до заданного значения

Немного изменив в стилистике оттенок и получается в 3D, что оставлю по умолчанию эту настройку.

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

Здесь нужно подключить библиотеку, у кого она еще на сайте не выставлена на странице.

Код
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

HTML

Код
<div class="chislenny-sostav"></div>

CSS

Код
.chislenny-sostav {
  display: table;
  margin: 100px auto 0;
  font-size: 120px;
  color: #efe9e9;
  text-shadow: 0 5px rgba(175, 169, 169, 0.8);
}

JS

Код
var $numero = 157;
$(".chislenny-sostav").html($numero);

$inicio_porcentagem = 0;
$fim_porcentagem = $('.chislenny-sostav').html();

setInterval(function(){  
  $(".chislenny-sostav").html($inicio_porcentagem);
  if($inicio_porcentagem < $fim_porcentagem){
  $inicio_porcentagem = $inicio_porcentagem + 1;
  }
}, 10);

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

Демонстрация
2019-10-13 Загрузок: 2 Просмотров: 328 Комментарий: (1)

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

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

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

Комментарий: 1
Kosten
Kosten 2019-10-13 01:131
0
Здесь небольшая подборка схожих материалов, которые позволяет вам считать или считать до числового значения анимированным способом с настраиваемым размером шага и задержкой анимации.

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

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