Responsive animierter Nummer Zähler erstellen

Diese spannende Elemente wo eine Zahl automatisch raufzählt und irgend etwas dazu geschrieben steht nennt man auf englisch „number counter“ und sowas programmieren wir heute. Perfekt für eure Webseite

Wir alle haben diese Elemente bereits gesehen – mal wird gezeigt wieviele Projekte man bereits umgesetzt hat, oder viele Liter Kaffee man bereits getrunken hat oder wieviele Klicks man mit der Maus gemacht hat – ich habe schon ein Elektriker gesehen der auf seiner Webseite gezeigt hat wieviele KM Leitungen er schon verlegt hat und wieviele Stromschalter er angeschlossen hat. Das war eine humorvolle Webseite.

Natürlich könnt ihr Plugins für WordPress installieren die das alles für euch machen, oder ihr baut es selber.

Heute zeige ich euch wie das geht.

Video

HTML

<div class="wrapper">
      <div class="container">
        <i class="fa-solid fa-mug-hot"></i>
        <span class="zahl" data-value="136">000</span>
        <span class="text">Kaffee getrunken</span>
      </div>
      <div class="container">
        <i class="fa-solid fa-pen"></i>
        <span class="zahl" data-value="82">000</span>
        <span class="text">Stifte verbraucht</span>
      </div>
      <div class="container">
        <i class="fa-regular fa-note-sticky"></i>
        <span class="zahl" data-value="265">000</span>
        <span class="text">Notizen gemacht</span>
      </div>
      <div class="container">
        <i class="fa-solid fa-computer-mouse"></i>
        <span class="zahl" data-value="486">000</span>
        <span class="text">Mäuse zerstört</span>
      </div>
    </div>

CSS

.wrapper {
  /*border: 1px solid #fff;*/
  position: absolute;
  width: 80vw;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  display: flex;
  justify-content: space-around;
  gap: 10px;
}

.container {
  width: 28vmin;
  height: 28vmin;
  /* border: 1px solid orange; */
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 1em 0;
  position: relative;
  font-size: 16px;
  border-radius: 10px;
  background-color: #280037;
  border-bottom: 10px solid #a000da;
  align-items: center;
}
i {
  display: block;
  color: #c0a2fc;
  font-size: 4.5em;
  text-align: center;
}

span.zahl {
  color: #f0dc00;
  font-size: 3em;
  font-weight: 900;
}
span.text {
  color: #fff;
  font-size: 1em;
  font-weight: 400;
}

@media screen and (max-width: 1024px) {
  .wrapper {
    width: 85vw;
  }
  .container {
    height: 26vmin;
    width: 26vmin;
    font-size: 12px;
  }
}
@media screen and (max-width: 768px) {
  .wrapper {
    width: 90vw;
    flex-wrap: wrap;
    gap: 30px;
  }
  .container {
    width: 200px;
    height: 30vmin;
    font-size: 14px;
  }
  i {
    font-size: 2em;
  }
}
@media screen and (max-width: 480px) {
  .wrapper {
    gap: 15px;
  }
  .container {
    width: 100%;
    height: 25vmin;
    font-size: 10px;
  }
  i {
    font-size: 18px;
  }
  span.zahl {
    font-size: 18px;
  }
}

Javascript

let zahl = document.querySelectorAll(".zahl");
let interval = 3000;

console.log(zahl);

zahl.forEach((zahl) => {
    let start = 0;
    let ende = parseInt(zahl.getAttribute("data-value"));
    console.log(ende);

    let dauer = Math.floor(interval / ende);
    let counter = setInterval(function(){
       start += 1; 
       zahl.textContent = start;
       if (start == ende){
        clearInterval(counter);
       }
    }, dauer);
})