• Страница 1 из 1
  • 1
Форум » Web-Раздел » Начинающему вебмастеру » Анимированный счетчик номеров на JQuery (Анимированный счетчик номеров от нуля до стоимости)
Анимированный счетчик номеров на JQuery
Kosten
Суббота, 23 Июня 2018 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Вашему вниманию, без стилистики идет счетчик анимированных номеров на jQuery от нуля до заданного значения. Мы получаем отсчет диапазон счетчика свойства CSS , начиная с нуля в течение для каждого цикла в JQuery и установку счетчика в виде текста с помощью CSS собственности внутри функции анимации.

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

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

1. продолжительность: количество раз в миллисекундах для анимации;
2. ослабление: функция ослабления для перехода;
3 step: эта функция предоставляет возможность изменить объект Tween, чтобы изменить значение свойства до его установки;

Первый вариант:



HTML

Код
<span class="zabuksa">741</span>


Jquery

Код
$('.zabuksa').each(function() {
  $(this).prop('Counter', 0).animate({
    Counter: $(this).text()
  }, {
    duration: 8000,
    easing: 'swing',
    step: function(now) {
      $(this).text(Math.ceil(now));
    }
  });
});


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

Второй вариант:



Сценарий является гибким и настраивается на количество цифр в номере. Он также добавляет запятые для правильного форматирования номера.

HTML

Код
    <div id="kagernatukog"><span class="sicla">132</span>
    </div>
    <div id="kagernatukog"><span class="sicla">275</span>
    </div>


Jquery

Код
$('.sicla').each(function() {
    $(this).prop('Counter', 0).animate({
        Counter: $(this).text()
    }, {
        duration: 5000,
        easing: 'swing',
        step: function(now) {
            $(this).text(Math.ceil(now));
        }
    });
});


CSS

Код
    #kagernatukog {
    width: 175px;
    border: 1px solid #63656b;
    padding: 2px 3px 3px 3px;
    border-radius: 3px;
    font-family: arial;
    line-height: 16px;
    color: #3e3939;
    font-size: 14px;
    background: #f7f2f2;
    float: left;
    margin: 3px;
}
      
  .sicla {
            line-height: 58px;
            color: black;
            margin-left: 25px;
            font-size: 27px;
        }


Демонстрация
Прикрепления: 1808294.png (7.2 Kb) · 4533204.png (29.9 Kb)
Страна: (RU)
Kosten
Воскресенье, 13 Октября 2019 | Сообщение 2
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Анимация счетчика чисел используется во всей сети для более интересного и привлекательного отображения чисел. Например: веб-сайты используют анимацию счетчика чисел для отображения общего количества акций и просмотров статьи.

Анимация накручивание чисел на сайте
Анимация чисел для сайта на jQuery
Анимация увеличение числа на jQuery + CSS
Анимированное увеличение чисел на jQuery + CSS

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

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


See the Pen
Счетчик jQuery Number
by Kocsten (@kocsten)
on CodePen.


Прикрепления: _jQuery.zip (3.9 Kb)
Страна: (RU)
Kosten
Среда, 16 Октября 2019 | Сообщение 3
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
Это простейший плагин счетчика jQuery, который подсчитывает или увеличивает счет до указанного числа с настраиваемым замедлением и поддержкой продолжительности.

HTML

Код
<div class="row">
  <h1>Growth By Numbers</h1>
  <p class="para">We have grown from strength to strength over the past 20 years</p>
  
  <div class="col-md-2 col-md-offset-2">      <h1><span class="counter">20,000</span></h1>
    <p>DELIVERIES IN 2015</p>
  </div>
  
  <div class="col-md-2">
    <h1><span class="counter">7,300</span></h1>
    <p>DAYS OF OPERATION</p>
  </div>
  
  <div class="col-md-2">
    <h1><span class="counter">2,500</span></h1>
    <p>WORKERS CLOCKING IN</p>
  </div>
  
  <div class="col-md-2">
    <h1><span class="counter">1,000</span></h1>
    <p>SATISFIED CUSTOMERS</p>
  </div>
   
</div>

CSS

Код
body{
  background:#073763;
   text-align:center;
   color:#fff;
}
.row{
  margin-top:70px;
}
.counter{
  color: #f1c232;
}
div.col-md-2{
  border-right:#ddd solid 0.1px;
}
div.col-md-2:last-child{
  border-right:#ddd solid 0px;
}

JS

Код
(function( $ ){
  "use strict";

  $.fn.counterUp = function( options ) {

    // Defaults
    var settings = $.extend({
        'time': 400,
        'delay': 10
    }, options);

    return this.each(function(){

        // Store the object
        var $this = $(this);
        var $settings = settings;

        var counterUpper = function() {
            var nums = [];
            var divisions = $settings.time / $settings.delay;
            var num = $this.text();
            var isComma = /[0-9]+,[0-9]+/.test(num);
            num = num.replace(/,/g, '');
            var isInt = /^[0-9]+$/.test(num);
            var isFloat = /^[0-9]+\.[0-9]+$/.test(num);
            var decimalPlaces = isFloat ? (num.split('.')[1] || []).length : 0;

            // Generate list of incremental numbers to display
            for (var i = divisions; i >= 1; i--) {

                // Preserve as int if input was int
                var newNum = parseInt(num / divisions * i);

                // Preserve float if input was float
                if (isFloat) {
                    newNum = parseFloat(num / divisions * i).toFixed(decimalPlaces);
                }

                // Preserve commas if input had commas
                if (isComma) {
                    while (/(\d+)(\d{3})/.test(newNum.toString())) {
                        newNum = newNum.toString().replace(/(\d+)(\d{3})/, '$1'+','+'$2');
                    }
                }

                nums.unshift(newNum);
            }

            $this.data('counterup-nums', nums);
            $this.text('0');

            // Updates the number until we're done
            var f = function() {
                $this.text($this.data('counterup-nums').shift());
                if ($this.data('counterup-nums').length) {
                    setTimeout($this.data('counterup-func'), $settings.delay);
                } else {
                    delete $this.data('counterup-nums');
                    $this.data('counterup-nums', null);
                    $this.data('counterup-func', null);
                }
            };
            $this.data('counterup-func', f);

            // Start the count up
            setTimeout($this.data('counterup-func'), $settings.delay);
        };

        // Perform counts when the element gets into view
        $this.waypoint(counterUpper, { offset: '100%', triggerOnce: true });
    });

  };

})( jQuery );

  // custom code
jQuery(document).ready(function( $ ) {
        $('.counter').counterUp({
            delay: 10,
            time: 1000
        });
    });


Подсчет чисел с помощью CounterUP JS


See the Pen
Counting
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Kosten
Среда, 16 Октября 2019 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44342
Награды: 70
У нас есть требование в одном из наших проектов иметь счетчики, которые должны анимироваться, когда он находится в области просмотра, а также при прокрутке в обоих направлениях. Поскольку мы все знаем, что самый простой способ - это зайти в Google и найти какой-нибудь скрипт, который облегчает нашу работу, мы тоже сделали то же самое, но не смогли найти то же самое. Теперь у нас нет другого выбора, кроме как генерировать его самостоятельно.

HTML

Код
<div class="title">
  <div class="box" data-duration="5000">
     734
  </div>
  <p> ZorNet.Ru — сайт для вебмастера </p>
</div>

CSS

Код
@import url(https://fonts.googleapis.com/css?family=PT+Sans+Narrow);

body {
  background: #1a1a1a;
  font-family: 'PT Sans Narrow', sans-serif;
}

.title {
  color: #fff;
  font-size: 150px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  text-align: center;
  margin-top: -75px;
}

.title p {
  font-size: 15px;
  letter-spacing: 12px;
  opacity: .2;
}

JS

Код
$('.box').each(function () {
    $(this).prop('Counter',0).animate({
        Counter: $(this).text()
    }, {
        duration: Number($(this).attr("data-duration")),
        easing: 'swing',
        step: function (now) {
            $(this).text(Math.ceil(now));
        }
    });
});



See the Pen
Animated Counter
by Kocsten (@kocsten)
on CodePen.


Страна: (RU)
Форум » Web-Раздел » Начинающему вебмастеру » Анимированный счетчик номеров на JQuery (Анимированный счетчик номеров от нуля до стоимости)
  • Страница 1 из 1
  • 1
Поиск: