Анимация чисел при прокрутке страницы

Всем - привет. Сегодня поговорим о том, как сделать анимацию чисел на сайте, и реализуем этот эффект таким образом, чтобы он сработал только в тот момент, когда пользователь видит его.

То есть находиться в так называемой "активной области".

Недавно реализовывал подобный эффект на одном из сайтов, а также заметил комментарий на блоге с вопросом:

Мб глупый вопрос, но….
Если мне нужно определенное действие 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.