Анимация чисел для сайта на jQuery
 | |
| В этой статье узнаете, как реализовать простую анимацию подсчета цифр, которые при открытии страницы начинают выводить численность под значением. Вероятно многие встречали на сайтах, основном на тематических, даже на одностроничных, где вы выводите блок, и в нем начинает перебор цифр, который идет в плюс, и на каком то значение останавливается, это еще называют, как анимированное увеличение чисел. Если брать интернет магазин, то можно выставить, сколько продаж сотовых телефонов сегодня произошло, что под каждой тематикой идет свое значение, главное, чтоб все определялось в цифрах, с эффектом быстрой прокрутки. До этого на сайте мы уже размещали похожий материал в своем направление, где идет увеличение числа на jQuery + CSS, что функциональность аналогична, разве дизайн немного другой. Все проверено на работоспособность:  Установочный процесс: В HEAD подключаем библиотеку и шрифты с файлами js. Код <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.js"></script> HTML Код <div class="middle"> <div class="counting-sec"> <div class="inner-width"> <div class="col"> <i class="far fa-smile-wink"></i> <div class="num">564</div> Скрипты для сайта </div> <div class="col"> <i class="fas fa-briefcase"></i> <div class="num">83</div> Шаблоны </div> <div class="col"> <i class="far fa-money-bill-alt"></i> <div class="num">375</div> Дизайн сайта </div> <div class="col"> <i class="far fa-object-group"></i> <div class="num">326</div> Стилистика </div> </div> </div> </div> CSS Код body{ margin: 0; padding: 0; font-family: "montserrat",sans-serif; } .middle{ position: absolute; top: 50%; width: 100%; transform: translateY(-50%); } .counting-sec{ padding: 40px 0; width: 100%; background: linear-gradient(90deg,#3c6382,#82ccdd); } .inner-width{ max-width: 1200px; margin: auto; display: flex; } .col{ flex: 1; text-align: center; padding: 20px; color: #fff; text-transform: uppercase; } .col i{ font-size: 40px; color: #333; } .num{ font-size: 40px; margin: 20px 0; } JS Код $(".num").counterUp({delay:10,time:1000}); Если вам нужно посмотреть, как все работает, то скачав архив вы найдете файл на демонстрацию, а этот код уже почистил от ненужного, где только остается написать ключевые слова под каждый блок с численностью. Также как можно заметить, что здесь присутствуют шрифтовые кнопки, что отлично дополняют стилистику дизайна. Видео обзор: | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 1 | |
|
| |
