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!

Flash bekommt einen letzten Schlag, wenn Google die HTML5-Unterstützung für Chrome übernimmt

Flash bekommt einen letzten Schlag, wenn Google die HTML5-Unterstützung für Chrome übernimmt

Der Flash Player von Adobe ist seinem Ziel noch einen Schritt näher gekommen, da Google für seinen Chrome-Browser standardmäßig auf HTML5 umstellt.In den nächsten Tagen wird Google HTML5 standardmäßig aktivieren, eine Funktion für 1% der Nutzer, die derzeit Chrome 55 Stable ausführen. HTML5 standardmäßig ist auch für ungefähr 50% der Chrome 56 Beta-Benutzer aktiviert. Der Suchmas

(Tech- und Design-Tipps)

So verwenden Sie HTML5-Offline-Speicher auf Ihrer Website

So verwenden Sie HTML5-Offline-Speicher auf Ihrer Website

Abgesehen von neuen Elementen in HTML5 bietet diese neue Web-Technologie uns Offline-Speicher . Es gibt eine Reihe von Arten von Offline-Speicher, und in diesem Artikel werden wir sessionStorage und localStorage speziell diskutieren. Offline-Speicherung ermöglicht es uns, Daten im Browser des Benutzers zu speichern und unsere Web-Apps oder Spiele ohne Verbindung (für einen bestimmten Zeitraum) arbeiten zu lassen.I

(Tech- und Design-Tipps)