|
Анимированный счетчик номеров на JQuery
|
|
| Kosten | Суббота, 23 Июня 2018, 02:50 | Сообщение 1 |
| Вашему вниманию, без стилистики идет счетчик анимированных номеров на 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;
}
Демонстрация
| | Страна: (RU) |
| |
| Kosten | Воскресенье, 13 Октября 2019, 01:53 | Сообщение 2 |
|
| Анимация счетчика чисел используется во всей сети для более интересного и привлекательного отображения чисел. Например: веб-сайты используют анимацию счетчика чисел для отображения общего количества акций и просмотров статьи.
Анимация накручивание чисел на сайте
Анимация чисел для сайта на jQuery
Анимация увеличение числа на jQuery + CSS
Анимированное увеличение чисел на jQuery + CSS
Вы можете часто видеть их на сайтах агентств и в портфолио, в простом разделе, который предлагает различные счетчики. Вы можете указать целевое число, до которого счетчик должен рассчитывать.
Счетчик jQuery для подсчета до целевого числа
See the Pen
Счетчик jQuery Number by Kocsten (@kocsten)
on CodePen.
| | Страна: (RU) |
| |
| Kosten | Среда, 16 Октября 2019, 11:24 | Сообщение 3 |
|
| Это простейший плагин счетчика 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, 11:28 | Сообщение 4 |
|
| У нас есть требование в одном из наших проектов иметь счетчики, которые должны анимироваться, когда он находится в области просмотра, а также при прокрутке в обоих направлениях. Поскольку мы все знаем, что самый простой способ - это зайти в 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) |
| |
