de.hideout-lastation.com
Paradies Für Designer Und Entwickler


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!

Ein graziles Breadcrumb Navigationsmenü in CSS3 kodieren

Ein graziles Breadcrumb Navigationsmenü in CSS3 kodieren

Dieser Artikel ist Teil unserer "HTML5 / CSS3 Tutorials" -Serie - mit dem Ziel, Sie zu einem besseren Designer und / oder Entwickler zu machen. Klicken Sie hier, um mehr Artikel aus derselben Serie zu sehen. Navigationsmenüs und Links sind möglicherweise die wichtigsten Schnittstellenelemente zu einem Weblayout.

(Tech- und Design-Tipps)

Sie können jetzt Geld mit Google Mail senden und empfangen

Sie können jetzt Geld mit Google Mail senden und empfangen

Android: Im Jahr 2013 führte Google eine Funktion ein, mit der Nutzer von Google Wallet über die Webversion von Gmail Geld senden und empfangen können . Dieses Feature macht den Sprung in den mobilen Bereich schnell, da Google Mail für Android jetzt mit der Google Wallet-Integration ausgeliefert wird .Wen

(Tech- und Design-Tipps)