SmoothCounter Dokumentation

Problemstellung

Dynamische Zahlen mit Stil und Flexibilität.

Viele Plugins animieren Zahlen, bieten jedoch wenig Flexibilität, dynamische Formatierungen oder eine nahtlose Integration ins Design. SmoothCounter bietet eine elegante, anpassbare Lösung für Zahlenanimationen. Egal, ob du Statistiken, Echtzeit-Dashboards oder interaktive Benutzeroberflächen erstellst, SmoothCounter sorgt dafür, dass deine Zahlen dynamisch, visuell ansprechend und genau dann sichtbar sind, wenn sie ihre größte Wirkung erzielen.

Wichtige Funktionen

• Dynamische Animation:
  Flüssige Übergänge der Zahlen vom Start- zum Zielwert über eine definierte Dauer.

• Benutzerdefinierte Formatierung:
  Unterstützt Intl.NumberFormat für anpassbare Formate wie Währungen, Prozentsätze oder lokale Formate.

• Farbsteuerung:
  Definiere spezifische Farben für positive, negative oder Nullwerte oder lasse sie vom übergeordneten Element erben.

• Startet, wenn sichtbar:
  Die Animation beginnt erst, wenn der Zähler sichtbar ist. So wird die Animation genau dann ausgeführt, wenn sie für den Nutzer relevant ist.

• Callback-Unterstützung:
  Definiere eine Funktion, die nach Abschluss der Animation ausgeführt wird.

• Leichtgewichtig und einfach zu verwenden:
  Keine Abhängigkeiten, einfache Integration und responsive Skalierung.

Verwendung

Integration

1. JavaScript-Datei einbinden:

   <script src="SmoothCounter/SmoothCounter.js"></script>

2. Einen Container hinzufügen:

   <p>
       Dieser Text enthält einen dynamischen Zähler: <span id="inline-counter"></span>.
   </p>

3. SmoothCounter initialisieren:

   SmoothCounter("#inline-counter", {
       start: 0,                 // Startwert
       end: 1000,                // Zielwert
       duration: 3000,           // Dauer in Millisekunden
       formatter: new Intl.NumberFormat('de-DE', { style: 'decimal' }),
       positiveColor: "green",
       negativeColor: "red",
       zeroColor: null,
       onComplete: () => console.log("Animation abgeschlossen!")
   });

Anpassungsoptionen

Fazit

SmoothCounter kombiniert Eleganz und Funktionalität, um Zahlenanimationen ansprechend und relevant zu gestalten. Die Animation startet nur dann, wenn sie sichtbar ist – ein Feature, das sicherstellt, dass Nutzer die Animation genau dann wahrnehmen, wenn sie wichtig ist.