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!

Vergleichen Sie die Ladegeschwindigkeit von Websites (Side-by-Side) mit diesem Tool

Es ist kein Geheimnis, dass die Ladezeit einer Website ein wichtiger Faktor für die Benutzerfreundlichkeit ist. Dies wirkt sich auch auf die Google-Rangliste Ihrer Website aus. Daher ist die Optimierung Ihrer Seitengeschwindigkeit auf jeden Fall empfehlenswert.Wenn es einen Wettbewerber gibt, den Sie versuchen, einen Messwert zu übertreffen, den Sie analysieren könnten, ist die Seitengeschwindigkeit . U

(Tech- und Design-Tipps)

Frankendesign - Wenn alte Designs wieder zum Einsatz kommen

Kennst du die Geschichte von Frankensteins Monster? Ein verrückter Wissenschaftler versucht, eine lebende Kreatur mit Teilen aus einer Vielzahl von Individuen zu erschaffen. Designer haben oft viel gemeinsam mit dieser klassischen Geschichte, indem sie Elemente aus ihren alten Designs verwenden, um neue für ganz andere Kunden zu kreieren .D

(Tech- und Design-Tipps)