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

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

Здравствуйте. Выкладываю простой легкий скрипт анимации чисел при прокрутке. На сайте иногда нужно сделать блок с цифрами а-ля «Наши достижения в цифрах», сколько лет компания на рынке или сколько сотрудников в штате. Так вот такой блок можно с легкостью красиво анимировать. Каждое число в блоке будет как бы «расти» и остановится, когда дойдет до конечного числа. Анимация происходит только при «видимом» экране, как только вы «прискролили» к данному блоку.

Чтобы подключить скрипт нужно выполнить несколько шагов.

Шаг 1. Скачать файлы

Тут объяснять не нужно, просто нажимаем кнопку «Скачать»

Шаг 2. Заливаем скрипты на сервер и подключаем их

Разархивируем скаченный файл и заливаем файлы custom.js и jquery.spincrement.min.js в папку js (создать если ее нет). Также нужно не забыть подключить эти скрипты (заодно и библиотеку jQuery)

<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>

Шаг 3. Подключаем css-стили

Если у вас уже есть файл со скриптами, просто копируем содержимое файла style.css и вставляем в у же имеющийся

body {
    font: 16px 'Roboto', 'Trebuchet', 'Arial', 'Verdana', sans-serif;
}

* {
    margin: 0;
    padding: 0;
}

.text-area {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
}

.text-area h1,
h2,
h3 {
    text-align: center;
}

.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;
    opacity: 0;
}

.benefits__title {
    font-size: 1.125rem;
}

Если файлов css нет, то можно просто залить файл style.css в папку css и подключить в <head></head>

<link rel="stylesheet" href="./css/style.css">

Шаг 4. Вставляем HTML код

Ну и наконец вставляем сам блок с анимированными цифрами туда, куда нужно

<div class="benefits">
        <div class="benefits__inner">
            <h2 class="benefits__header">
                О компании в цифрах
            </h2>
            <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>

Для красоты демонстрации можно залить три картинки из папки img (это иконки). Можете и не заливать, вам, наверняка, они не нужны в вашем проекте.

Ву а-ля! Установка скрипта должна была пройти успешно, если вы все сделали правильно. Ну а если нет, то проверяйте все шаги. До новых постов, пока!

Похожие статьи

Комментарии ()