Всем - привет. Сегодня поговорим о том, как сделать анимацию чисел на сайте, и реализуем этот эффект таким образом, чтобы он сработал только в тот момент, когда пользователь видит его.
То есть находиться в так называемой "активной области".
Недавно реализовывал подобный эффект на одном из сайтов, а также заметил комментарий на блоге с вопросом:
Мб глупый вопрос, но….
Если мне нужно определенное действие js, то могу ли я как-то подключить wow.js для этого? Например, у меня есть скрипт, который увеличивает значение счетчика от 0 до нужного числа. И как подвязать wow.js, чтобы скрипт начал работать только когда пользователь доскроллит до счетчика?
Этой статьей я и покажу, как реализовать запуск скрипта, который реализует анимацию чисел от 0 до нужного значения в момент, когда пользователь доскроллил до этого блока на сайте. Только без wow.js, так как нет смысла подключать целый плагин для этих целей. Обойдемся небольшим самописным скриптом.
На самом деле решение не мое (подсмотрел на блоге webcareer), но ничего сложно, можно и самому было разобраться. Если скрипт рабочий, то почему им не воспользоваться? Итак, приступим.
Анимация цифр и чисел
Давайте начнем с того, что реализуем блок с анимацией чисел. Для этого нам нужно подключить jquery, плагин spincrement и файл, в котором вы пишите все свои скрипты. Конечно, для более быстрой загрузки лучше размещать их в конце документа и объединять все js и css файлы в 1, но это совсем другая история.
Вот так выглядит разметка блока с числами, которую быстренько набросал для примера:
<div class="benefits"> <div class="benefits__inner"> <h1 class="benefits__header"> О компании в цифрах </h1> <div class="benefits__element"> <img class="benefits__icon" src="./img/workers.svg" alt="Сотрудники"> <p class="benefits__number">10000</p> <p class="benefits__title">сотрудников по всему миру</p> </div> <div class="benefits__element"> <img class="benefits__icon" src="./img/projects.svg" alt="Проекты"> <p class="benefits__number">500</p> <p class="benefits__title">успешных проектов в год</p> </div> <div class="benefits__element"> <img class="benefits__icon" src="./img/calendar.svg" alt="Опыт"> <p class="benefits__number">15</p> <p class="benefits__title">лет в сфере разработки сайтов</p> </div> </div> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="./js/jquery.spincrement.min.js"></script> <script src="./js/custom.js"></script>
Код файла custom.js:
$(document).ready(function(){ $('.benefits__number').spincrement({ thousandSeparator: "", duration: 1200 }); });
Где .benefits__number - класс элемента, в котором расположены цифры. ThousandSeparator - это символ, который будет разделять тысячи. Duration - продолжительность анимации. У скрипта есть и другие настройки (обратный отсчет, начало анимации с заданного числа и т.д.), подробнее с которыми можно ознакомиться перейдя на страницу проекта по ссылке выше.
Добавим немного стилей:
.benefits { width: 100%; background: #151d2d; } .benefits__inner { display: flex; flex-wrap: wrap; justify-content: space-between; width: 100%; max-width: 1140px; margin: 0 auto; padding: 60px 0; } .benefits__header { width: 100%; text-align: center; line-height: 1.3; padding: 0 15px 60px; color: #e2e2e2; font-size: 2rem; text-transform: uppercase; } .benefits__element { width: 30%; } .benefits__icon { display: block; width: 60px; height: 50px; margin: 0 auto; margin-bottom: 20px; } .benefits__element p { color: #cdcdcd; text-align: center; line-height: 1.3; } .benefits__number { font-size: 2.5rem; font-weight: 700; margin-bottom: 20px } .benefits__title { font-size: 1.125rem; }
Теперь наш блок с цифрами выглядит так:
Пока не обращаем внимания на то, что он срабатывает сразу после загрузки страницы. Сейчас мы это поправим воспользовавшись тем самым скриптом, о котором шла речь вначале статьи:
var show = true; var countbox = ".benefits__inner"; $(window).on("scroll load resize", function () { if (!show) return false; // Отменяем показ анимации, если она уже была выполнена var w_top = $(window).scrollTop(); // Количество пикселей на которое была прокручена страница var e_top = $(countbox).offset().top; // Расстояние от блока со счетчиками до верха всего документа var w_height = $(window).height(); // Высота окна браузера var d_height = $(document).height(); // Высота всего документа var e_height = $(countbox).outerHeight(); // Полная высота блока со счетчиками if (w_top + 500 >= e_top || w_height + w_top == d_height || e_height + e_top < w_height) { // // скрипт который должен выполниться // show = false; } });
В принципе комментарии подробные, кто захочет разобраться - разберется. Единственное что поясню, так это то, что цифра 500 указывает на каком расстоянии от верха окна браузера сработает наш скрипт с анимацией. Можете менять его на свое усмотрение. А .benefits__inner - блок с цифрами.
Если собрать вместе, то скрипт будет выглядеть так:
$(document).ready(function () { var show = true; var countbox = ".benefits__inner"; $(window).on("scroll load resize", function () { if (!show) return false; // Отменяем показ анимации, если она уже была выполнена var w_top = $(window).scrollTop(); // Количество пикселей на которое была прокручена страница var e_top = $(countbox).offset().top; // Расстояние от блока со счетчиками до верха всего документа var w_height = $(window).height(); // Высота окна браузера var d_height = $(document).height(); // Высота всего документа var e_height = $(countbox).outerHeight(); // Полная высота блока со счетчиками if (w_top + 500 >= e_top || w_height + w_top == d_height || e_height + e_top < w_height) { $('.benefits__number').css('opacity', '1'); $('.benefits__number').spincrement({ thousandSeparator: "", duration: 1200 }); show = false; } }); });
Для того, чтобы реализовать эффект более красиво, давайте зададим блоку с цифрами полную прозрачность:
.benefits__number {opacity: 0;}
А в тот момент, когда должна произойти анимация изменим непрозрачность на 100% этой строкой:
('.benefits__number').css('opacity', '1');
На этом - все. Всем - пока!
P.S.: Если понравился эффект анимации чисел, то обратите внимание и на статью в которой рассказывалось об анимации текста, ведь это тренд на landing page.
18 комментариев
Хотелось бы узнать недостатки существующих плагинов анимации чисел, или преимуществу представленного плагина, по сравнению с существующими решениями.
Я не тестировал другие, меня этот, пока, вполне устраивает)
Я бы все таки узнала как это делать с wow - потому что обычно на сайте с анимациями wow уже есть. А вот дополнительно дописывать скрипты вместо использования уже имеющегося - это зло по увеличению массы кода
почему то цифры прокручивает - а потом все по 0
Не работает. Помогите пожалуйста __https://codepen.io/DariaArt/pen/oaJvmy.
Дарья, вы меняли что-то в исходнике?
Добрый день! у меня почему-то, то же самое, о чем писал Николай:
"цифры прокручивает — а потом все по 0"
Добрый день, не знаю чем вызвана ваша проблема, не сталкивался. Смотрите ошибки в консоли, там должно что-то быть.
Не нашел как настроить обратный отсчет. Например со 100 до 0
На сайте плагина есть 2 параметра "from" и "to", пробовали их использовать?
Если присутствуют вертикальные аккордеоны меняющие высоту страницы, скрипт ломается?
Чтобы не было "нуля", а исходное число
[javascript]
var defaults = {
from: 0,
to: null,
decimalPlaces: 0,
decimalPoint: '.',
thousandSeparator: ' ',
duration: 6500, // ms; TOTAL length animation
leeway: 50, // percent of duraion
easing: 'spincrementEasing',
fade: true,
complete: true
}
[javascript]
Добрый день. А как сделать что бы счётчик срабатывал только если блок в поле видимости? Т.е. не зависимо от количества прокрученных пикселей? Спасибо!
Максим, здравствуйте. А как понять где поле видимости, если не считать количество прокрученных пикселей?
Добрый день! Подскажите пожалуйста, как сделать так, чтобы счетчик не был прозрачным в начале? То есть, чтобы он был полностью виден с самой первой цифры. И второй вопрос: почему счетчик замедляется в конце? Как сделать одинаковую скорость от начала до конца? Заранее благодарю.
Самое главное - как это сделать БЕЗ монстра jquery.
статья 2021 года.... какие вары? какой жейквери? о хоспаде
Статья 2016 года, а выводится дата последнего сохранения/обновления, может ошибку какую-то исправлял, может ссылку удалял. Ну да ладно, в любом случае давно нужно актуализировать. Согласен) При этом ничего не имею против jquery и в 2021 и 2025, ведь используется, практически, в любой CMS и будет использоваться дальше.