Анимация увеличение чисел на JS + jQuery
 | |
| В статье рассмотрим варианты на анимированные эффекты увеличение чисел, где при открытии страницы наблюдать красивую анимацию числа по заданной категорией. Где безусловно такой эффект многие встречали, ведь его можно задействовать под любой формат, как пример, это статистика по сайту. Мы открываем страницу и видим дизайн корпус, где идет несколько кнопок. Где под одной выводит число, это сколько зарегистрировалось, что проматывает от 1 до крайнего, также, это сколько материала на сайте, что все идет аналогично. Но думаю вы поняли саму затею, ведь на сайтах, где по своему направлению занимаются услугой, то такой формат будет отличным приложением, первое, это идет как информация, что думаю важно, а второе, вы просто не сможете пропустить, когда все будет крутиться при подсчете. Все просто, здесь вы создаете анимированное увеличение чисел, которое увеличивается до нужного числа, что было изначально прописано в коде, и преподносится как элемент проделанной работы. Как пример:  Но здесь рассмотрим 3 варианта, где по своим функциям они аналогичны, так как ведут подсчет до заданного значение. Но по дизайну совершенно разные, что можете выбрать тот вариант, который вам больше подойдет, как по стилистике, так и по дизайну. Счетчик-Вверх: 1 вариант  Материал для 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 вариант  Материал для 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 для подсчета до целевого числа  Вы можете часто видеть их на сайтах агентств и в портфолио, и даже в простых разделах сайта, который предлагает различные счетчики. Где все аналогично выстроено, где вам нужно указать целевое число, до которого счетчик должен рассчитывать. Материал для 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); } }); Этот вариант счетчик для подсчета до целевого числа идет менее насыщен по библиотекам, так как здесь нужна ссылка для вывода кнопок, это шрифтовые знаки, и сама библиотека, и больше для работы не чего не требуется. Это если рассматривать первый и второй вариант, там более нужно ссылок прописать, чтоб получить аналогичный эффект. Демонстрация С анимированными числами настройка простого счетчика никогда не была проще. Полезно отображать быструю и интересную статистику вашей компании и в то же время привлекать внимание пользователей с помощью быстрого анимированного подсчета чисел. Примечание: Если фрагменты кода приводят к другому результату на вашем сайте, это может быть связано с тем, что параметры на вашем сайте отличаются или из-за каких-либо настроек, уже добавленных для достижения аналогичного результата. Попробуйте удалить ваши настройки, если таковые имеются, и не стесняйтесь изменять значения в примерах кодов в соответствии с вашим дизайном. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
