Анимированный счетчик

Создание плавных, интерактивных элементов на сайте, таких как анимированный счетчик, может превратиться в сложную задачу. Однако с использованием современного фреймворка Vue.js этот процесс становится интуитивно понятным и эффективным. Vue позволяет легко связывать данные с DOM, управлять состоянием и создавать впечатляющую анимацию с минимальными усилиями. Компонентный подход обеспечивает чистоту, переиспользуемость и простоту поддержки кода.

Ниже вы можете увидеть вживую, как работает компонент Анимированный Счетчик для социальных статистик, реализованный на Vue 3 Composition API. Чтобы посмотреть еще раз — перезагрузите страницу.

<div id="app">
  <div class="app__item" v-for="item,i in socials" :key="i">
    <span class="app__item-icon" :class="item.icon"></span>
    <span class="app__item-num">{{ item.init }}</span>
    <span class="app__item-text">{{ item.desc }}</span>
  </div>
</div>

#app {  
  display: grid;
  grid-template-columns: repeat(3, 250px);
  justify-content: center;
  align-items: center;
  gap: 0 clamp(25px, -0.9799rem + 5.2966vi, 50px);
  padding-block: 100px;
 color: #fff;
  background-color: #CD5C5C;
  font-family: Inconsolata, sans-serif;
}
.app__item {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.app__item-icon {
  --w:50px;
  margin-block-end: 10px;
  width: var(--w);
  height: var(--w);
  background-repeat: no-repeat;
}
.app__item-icon.telegram {
  background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12c0-6.627-5.373-12-12-12zm5.894 8.221-1.97 9.28c-.145.658-.537.818-1.084.508l-3-2.21-1.446 1.394c-.14.18-.357.295-.6.295-.002 0-.003 0-.005 0l.213-3.054 5.56-5.022c.24-.213-.054-.334-.373-.121l-6.869 4.326-2.96-.924c-.64-.203-.658-.64.135-.954l11.566-4.458c.538-.196 1.006.128.832.941z' fill='white'/%3E%3C/svg%3E");
}
.app__item-icon.yt {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 -3 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg transform='translate(-300.000000, -7442.000000)' fill='%23ffffff'%3E%3Cg transform='translate(56.000000, 160.000000)'%3E%3Cpath d='M251.988432,7291.58588 L251.988432,7285.97425 C253.980638,7286.91168 255.523602,7287.8172 257.348463,7288.79353 C255.843351,7289.62824 253.980638,7290.56468 251.988432,7291.58588 M263.090998,7283.18289 C262.747343,7282.73013 262.161634,7282.37809 261.538073,7282.26141 C259.705243,7281.91336 248.270974,7281.91237 246.439141,7282.26141 C245.939097,7282.35515 245.493839,7282.58153 245.111335,7282.93357 C243.49964,7284.42947 244.004664,7292.45151 244.393145,7293.75096 C244.556505,7294.31342 244.767679,7294.71931 245.033639,7294.98558 C245.376298,7295.33761 245.845463,7295.57995 246.384355,7295.68865 C247.893451,7296.0008 255.668037,7296.17532 261.506198,7295.73552 C262.044094,7295.64178 262.520231,7295.39147 262.895762,7295.02447 C264.385932,7293.53455 264.28433,7285.06174 263.090998,7283.18289'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.app__item-icon.vk {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M3.4 3.4C2 4.81333 2 7.07333 2 11.6V12.4C2 16.92 2 19.18 3.4 20.6C4.81333 22 7.07333 22 11.6 22H12.4C16.92 22 19.18 22 20.6 20.6C22 19.1867 22 16.9267 22 12.4V11.6C22 7.08 22 4.82 20.6 3.4C19.1867 2 16.9267 2 12.4 2H11.6C7.08 2 4.82 2 3.4 3.4ZM5.37333 8.08667C5.48 13.2867 8.08 16.4067 12.64 16.4067H12.9067V13.4333C14.58 13.6 15.8467 14.8267 16.3533 16.4067H18.72C18.4773 15.5089 18.0469 14.6727 17.4574 13.9533C16.8679 13.234 16.1326 12.6478 15.3 12.2333C16.0461 11.779 16.6905 11.1756 17.1929 10.461C17.6953 9.7464 18.045 8.93585 18.22 8.08H16.0733C15.6067 9.73334 14.22 11.2333 12.9067 11.3733V8.08667H10.7533V13.8467C9.42 13.5133 7.74 11.9 7.66666 8.08667H5.37333Z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.app__item-num {
  font-size: clamp(48px, 2.4783rem + 2.6087vi, 72px);
  line-height: 1.1;
}
.app__item-text {
  letter-spacing: 1px;
}
@media (max-width: 768px) {
  #app {
    grid-template-columns: 1fr;
    align-content: center;
    gap: 20px 0;
  }
}

const {createApp,ref,onMounted} = Vue
createApp({
  setup() {
    const socials = ref([{
        name: 'Телеграм',
        desc: 'Читающих Телеграм',
        icon: 'telegram',
        init: 0,
        total: 12000,
      },
      {
        name: 'YouTube',
        desc: 'Подписчиков на YouTube',
        icon: 'yt',
        init: 0,
        total: 5000,
      },
      {
        name: 'ВКонтакте',
        desc: 'Фанатов на VK',
        icon: 'vk',
        init: 0,
        total: 7500,
      },
    ])
    onMounted(() => {
      let intId = setInterval(() => {
        for (let el of socials.value) {
          if (el.total > el.init) {
            el.init += el.total / 100
          } else {
            clearInterval(intId)
            return
          }
        }
      }, 30)
    })
    return {
      socials
    }
  }
}).mount('#app')

Внимание! Представленный код — это готовый компонент, но для его работы на странице должен быть установлен и подключен фреймворк Vue. Если вы начинающий разработчик, просто добавьте строку
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
в раздел <head> вашего HTML, и всё заработает.

Разбор кода компонента: Как это работает?

Представленный ниже код демонстрирует чистую и эффективную реализацию. Давайте разберем его по частям.

HTML-структура (Шаблон)

v-for="item,i in socials": Директива Vue для рендеринга списка. Она создает блок .app__item для каждого объекта в реактивном массиве socials.
{{ item.init }}: Интерполяция, отображающая текущее значение счетчика. Значение реактивно обновляется по мере анимации.
:class="item.icon": Динамическое добавление CSS-класса (например, telegram) для отображения соответствующей иконки.

Стили (CSS)

Адаптивная сетка: Используется display: grid с repeat(3, 250px) для трех колонок на десктопе и переходом на одну колонку (grid-template-columns: 1fr) на мобильных устройствах (@media (max-width: 768px)).
Гибкие единицы измерения: Применяются clamp() для плавного изменения размера шрифта и отступов, а также vi (viewport inline) для адаптивных промежутков.
Векторные иконки: Иконки вставлены как SVG через background-image в формате data:image/svg+xml, что исключает дополнительные HTTP-запросы и позволяет легко управлять цветом (fill='white').

Логика на JavaScript (Vue 3 Composition API)

Реактивные данные: Массив socials объявлен через ref(). Каждый объект содержит начальное значение init, целевое total, описание и класс иконки.
Хук жизненного цикла onMounted: Логика анимации запускается сразу после монтирования компонента в DOM.
Механика анимации: Используется setInterval, который каждые 30 мс увеличивает значение init на 1% от целевого total (el.total / 100). Когда все счетчики достигают целевых значений, интервал очищается (clearInterval). Это создает плавный эффект инкремента.

Добавьте динамики и стиля — оживите цифры на вашем сайте!

Анимированные элементы, подобные этому счетчику, — это не просто украшение. Они удерживают внимание, наглядно демонстрируют преимущества и динамику, повышая вовлеченность пользователей.

Наша веб-студия готова воплотить в жизнь самые креативные и интерактивные идеи. От сложных анимированных интерфейсов на Javascript и Vue.js до эффективных и современных решений для вашего бизнеса. Давайте создадим что-то выдающееся вместе!

Свяжитесь с нами — и мы разработаем уникальные компоненты, которые выделят ваш сайт среди конкурентов.

Предыдущий Следующий