Compte à rebours

Texte animation

Animation

Texte circulaire

CountUp avec Unbounded

Code HTML

				
					<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>CountUp avec Unbounded</title>
  <!-- Importation de la police Unbounded -->
  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@700&display=swap" rel="stylesheet">
  <style>
    body {
      margin: 0;
      background: #000;
      color: #fff;
      font-family: 'Unbounded', sans-serif;
    }

    .countup-container {
      text-align: center;
    }

    .countup {
      font-size: 3rem;
      font-weight: 700;
      margin: 0;
    }

    .btn {
      padding: 10px 20px;
      font-size: 1rem;
      background: transparent;
      color: #fff;
      border: 1px solid #fff;
      border-radius: 8px;
      cursor: pointer;
      transition: border-color 0.3s;
    }

    .btn:hover,
    .btn:active,
    .btn:focus {
      background: transparent;
      color: #fff;
      border-color: #fff;
      outline: none;
    }
  </style>
</head>
<body>

<div class="countup-container">
  <div id="count" class="countup">0</div>
  <button class="btn" onclick="startCountUp()">Relancer l'animation</button>
</div>

<script>
  function startCountUp() {
    const el = document.getElementById("count");
    const start = 0;
    const end = 3000;
    const duration = 2;
    const startTime = performance.now();

    function update(now) {
      const elapsed = (now - startTime) / 1000;
      const progress = Math.min(elapsed / duration, 1);
      const value = Math.floor(start + (end - start) * progress);
      el.textContent = value.toLocaleString('fr-FR');
      if (progress < 1) {
        requestAnimationFrame(update);
      }
    }

    requestAnimationFrame(update);
  }

  // Lancement initial
  startCountUp();
</script>

</body>
</html>

Comment insérer le code sur son site ?

✏️ Étape 1 : Copiez ce code.

Copier le code complet. Ne vous inquiétez pas, vous le collerez tel quel.

🛠️ Étape 2 : Ajoutez ce code dans votre site.

Allez dans Pages > Modifier avec Elementor sur la page souhaitée
Cherchez le widget HTML
Glissez le widget HTML à l’endroit voulu sur la page
Collez tout le code que vous venez de copier dans le champ HTML
Cliquez sur Mettre à jour

✅ C’est terminé !

Quand vous visualisez la page, le texte circulaire tourne automatiquement, et ralentit si vous passez votre souris dessus 🌀

Strategie Execution Succès

Agence de webdesign à Brest spécialisé dans le référencement local.

Notre Newsletters

Navigation

Liens pratiques

Services

Location

Rue de l’Elorn, 29200 Brest

Site web réalisé par WREIZH.