Адаптивная анимация подсчета чисел с использованием JavaScript

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem

Подпишись и скачивай
любые файлы, скрипты, проекты и многое другое

MonsterTem.ru » Разное для сайта » Адаптивная анимация подсчета чисел с использованием JavaScript

Адаптивная анимация подсчета чисел с использованием JavaScript

11.11.2024

11 просмтотров

В этом видео мы сделаем адаптивную анимацию подсчета чисел с помощью HTML CSS и jаvascript. Надеюсь, это видео будет вам полезно. Вы можете скачать коды по ссылке, указанной ниже.

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

В архиве находится:

Исходные файлы HTML
Исходные файлы CSS
Исходные файлы jаvascript
Иконки шрифтов
Файлы библиотеки и плагинов

HTML КОД:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Num Counting Animation</title>

    <!--font awesome(for icons)-->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    />

    <!--css file-->
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <div class="card">
        <i class="fas fa-code"></i>
        <span class="num" data-num="100">100</span>
        <span class="text">Projects</span>
      </div>
      <div class="card">
        <i class="fas fa-book"></i>
        <span class="num" data-num="110">110</span>
        <span class="text">Articles</span>
      </div>
      <div class="card">
        <i class="fas fa-face-smile"></i>
        <span class="num" data-num="120">120</span>
        <span class="text">Happy Clients</span>
      </div>
      <div class="card">
        <i class="fas fa-mug-hot"></i>
        <span class="num" data-num="130">130</span>
        <span class="text">Meetings</span>
      </div>
    </div>

    <script src="app.js"></script>
  </body>
</html>

CSS КОД:

/* Google Fonts(Poppins) */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

* {
  font-family: "Poppins", sans-serif;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #121317;
  padding: 50px 0;
}

.wrapper {
  width: 90vw;
  display: flex;
  justify-content: space-around;  
  gap: 10px;
}

.wrapper .card {
  width: calc(100% / 4);
  background: #21242b;
  padding: 20px 0;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 5px;
  border-bottom: 10px solid #4070f4;
  text-align: center;
}

.wrapper .card i {
  font-size: 35px;
  color: #4070f4;
}

.wrapper .card .num {
  color: #fff;
  font-size: 40px;
  font-weight: 600;
}

.wrapper .card .text {
  color: #999;
  font-size: 15px;
  font-weight: 400;
  line-height: 0;
}

@media (max-width: 768px) {
  .wrapper {
    flex-wrap: wrap;
    gap: 20px;
  }

  .wrapper .card {
    width: calc(100% / 2 - 20px);
  }
}

@media (max-width: 480px) {
  .wrapper {
    gap: 15px;
  }

  .wrapper .card {
    width: 100%;
  }
}

jаvascript КОД:

let cardNums = document.querySelectorAll(".num");

let interval = 4000;

cardNums.forEach((num) => {
  let startValue = 0;
  let endValue = parseInt(num.getAttribute("data-num"));
  let duration = Math.floor(interval / endValue);

  let counter = setInterval(function () {
    startValue += 1;
    num.textContent = startValue;

    if (startValue == endValue) {
      clearInterval(counter);
    }
  }, duration);
});

Скачать

Категории: Разное для сайта | Анимация и Эффекты

MonsterTem.ru

V.I.P ЭКСКЛЮЗИВ
boosty.to/monster-tem