Glattere Zahlenübergabe mit Kilometerzähler

Eine der Möglichkeiten, eine Präsentation numerischer Informationen interessanter zu gestalten, besteht darin , eine Übergangsanimation hinzuzufügen . Das Erstellen einer Übergangsanimation kann mit Javascript durchgeführt werden, aber die Codierung wird sehr lange dauern. Für eine schnellere Alternative, versuchen Sie Odometer.

Odometer ist ein Javascript-Plugin, das Ihnen helfen kann , Ihre numerischen Informationen mit fließenden Übergängen und coolen Themen attraktiver zu machen . Es ist einfach einzurichten und wird von vielen aktuellen Browsern unterstützt.

Implementierung

Odometer ist ein eigenständiges Javascript-Plugin . Sie müssen nur die js-Datei und ihr Thema auf Ihrer Seite mit dem folgenden Code einschließen:

Sie sind fertig! Jetzt wird jedes Element, das Sie in die odometer, in einen Kilometerzähler umgewandelt.

In diesem Beispiel verwende ich ein autoähnliches Tachometer-Thema. Odometer kommt mit sechs anderen verschiedenen Themen, nämlich die Standard-Thema, Digital, Minimal, Plaza, Spielautomat und Bahnhof Themen. Sie können zur Demo-Seite gehen, um sie in Aktion zu sehen.

Um den Wert zu aktualisieren, können Sie entweder natives JavaScript oder einen jQuery-Code verwenden. Rufen Sie zuerst die Funktion setTimeout und definieren Sie dann den aktualisierten Wert wie im folgenden Codeausschnitt:

Oder Sie können ein jQuery-Formular wie folgt verwenden:

 setTimeout (Funktion () {$ ('. Odometer'). html (5555);}, 1000); 

Der Wert 1000 im Code bedeutet, dass der Aktualisierungsprozess eine Sekunde nach dem vollständigen Laden der Seite ausgeführt wird.

Fügen Sie dann einem beliebigen Element eine odometer, zum Beispiel:

3252

Und der Wert von 3252 wird dann mit einem kühlen Übergang zu 5555 geändert (wie zuvor definiert).

Optionen

Für erweiterte Funktionen bietet Odometer einige Optionen zum Anpassen. Dies ist nützlich, wenn die Standardeinstellung nicht zu Ihnen passt. Um Optionen festlegen zu können, erstellen Sie zunächst ein odometerOptions Objekt wie folgt:

Die format wirkt sich auf die Zahlenformatierungsregel aus, z. B. das Anzeigen eines Dezimalpunkts vor bestimmten Ziffern. (ddd) bedeutet, dass in der Zahl kein Dezimalpunkt vorhanden ist. Und für andere Optionen, sehen Sie sich die folgende Liste an:

 window.odometerOptions = {auto: false, // Initiiere nicht automatisch alles mit dem 'Odometer' der Klasse 'selector:' .my-numbers ', // Ändere den Selektor, der benutzt wird, um automatisch Dinge zu finden, die animiert werden sollen:' (, ddd ) .dd ', // Ändere, wie Zifferngruppen formatiert werden und wie viele Ziffern nach der Dezimaltrennzeichen-Dauer angezeigt werden: 3000, // Ändere, wie lange das Javascript von der CSS-Animation erwartet:' Auto ', // Angeben Das Theme (wenn Sie mehr als eine Theme-CSS-Datei auf der Seite haben) animation: 'count' // Count ist eine einfachere Animationsmethode, die den Wert nur erhöht, // wenn Sie etwas Subtileres suchen. }; 

Fazit

Für diejenigen, die oft numerische Informationen präsentieren und es auffälliger machen möchten, ist Odometer eine gute Wahl. Beachten Sie, dass das Plugin nicht funktioniert, wenn Sie etwas anderes als eine Zahl eingeben . Wie auch immer, versuchen Sie es und lassen Sie uns wissen, was Sie denken!

Wie Sie Ihre Inhalte schwer replizieren können

Wussten Sie, dass das Internet derzeit ungefähr 3, 3 Milliarden indizierte Seiten hat - und zählt? Das entspricht einer unglaublichen Anzahl von 33 Milliarden Links zu Web-Inhalten, vorausgesetzt, jede Seite hat 10 Einträge. Lassen Sie das sinken.Wenn Sie ein Leser sind, ist das viel mehr Informationen, als Sie in einem Leben verbrauchen können . We

(Tech- und Design-Tipps)

Firefox Send - Diese Datei wird sich nach dem Download selbst zerstören

Die Online-Freigabe Ihrer Dateien ist heutzutage ziemlich riskant, da Hacker diese Dateien stehlen oder duplizieren können, ohne dass jemand davon weiß.Dank dieser Ängste haben viele Online-File-Sharing-Systeme damit begonnen, die Dateien vorsichtshalber zu verschlüsseln, um zu verhindern, dass Hacker leicht auf die fraglichen Dateien zugreifen können.Vor

(Tech- und Design-Tipps)