Das Anzeigen der Zeit ist im Web sehr beliebt. Aber es ist nicht auf das beschränkt, was wir normalerweise am Handgelenk tragen oder an der Wand hängen.
Natürlich kann eine traditionelle Uhr die Ästhetik einer Website oder App verbessern. Dies ist jedoch in bestimmten Situationen sehr nützlich, da die Bildschirme unserer Geräte bereits die Grundlagen zeigen.
Ein Bereich, in dem die Zeit wirklich scheint, ist das Hoch- oder Herunterzählen. Unabhängig davon, ob Sie die Zeit seit einem Ereignis wie einem Online-Quiz oder die Anzahl der Tage bis zur Einführung eines großartigen Produkts anzeigen, können diese Elemente für ein wenig Aufregung sorgen. Darüber hinaus können sie eine wichtige Rolle für die allgemeine Benutzererfahrung spielen.
Schauen wir uns einige Codefragmente an, mit denen Sie zeitbezogene Funktionen in Ihre Projekte integrieren können.
Ein Hightech-Vue
Obwohl unser erstes Beispiel für traditionellere Uhren verwendet werden kann, sieht es auch hochmodern aus. Es wurde mit Vue.js erstellt und zeigt, wie Design den grundlegendsten Technologien einen Hauch von Persönlichkeit verleihen kann.
Siehe Toshiyuki TAKAHASHI Kugelschreiber mit Vue.js Digitaluhr.
Sehr meta
Eine Uhr aus … Uhren? Es mag distanziert erscheinen, aber darum geht es in diesem CSS-Snippet. Beobachten Sie, wie sich die „Zeiger“ der ausgewählten Mini-Uhren gemeinsam ändern, um die verstrichene Zeit zu zählen. Wie bei den besten Schweizer Uhren sind die Uhrwerke unglaublich komplex.
Uhr Razvan Spatariu Uhr Kugelschreiberuhr
Countdown zum Starten
Countdowns werden häufig verwendet, um Vorfreude auf ein Großereignis zu erzeugen. Vielleicht ist es ein neues Produkt, eine Konferenz oder sogar eine Filmpremiere. Sie sind gleichermaßen lustig und nützlich. Dieses attraktive Beispiel bietet einen 24-Stunden-Countdown im klassischen Flip-Stil.
Sehen Sie sich Dorian Camilleris Countdown an
Der nächste Urlaub kommt immer
Ein Countdown kann auch E-Commerce-Websites zugute kommen, die sich auf einen bestimmten Urlaub konzentrieren möchten. In diesem Fall ist Unabhängigkeitstag in den Vereinigten Staaten. Aber ein Gegenstand in dieser Verkleidung kann eine großartige Note für fast jeden besonderen Tag sein, auf den Sie aufmerksam machen möchten.
Siehe DailyUI Pen # 014 Timer von Julie Park
Schnelle Zeit
Begrüßungsbildschirme scheinen zurückzukommen. Anstatt den Benutzern zu erlauben, auf den nächsten Schritt zu klicken, kann eine zeitgesteuerte Weiterleitung eine gute Möglichkeit sein, Ihre Meinung ohne zu viel Arbeit zu äußern. Diese Countdown-Animation für Filme der alten Schule könnte perfekt für diese Verwendung sein.
Sehen Sie sich Craig Roblewskys Film-Countdown im Federstil an
Ein Hauch von Klasse
Luxusuhren kommen nie aus der Mode. Mit einem schönen Aussehen und präzisen Bewegungen regen sie die Fantasie an. Hier haben wir eine originalgetreue Nachbildung einer Rolex-Uhr. Es ist vielleicht nicht jeden Tag so nützlich für Ihre Website, aber es ist etwas zu bewundern.
Schauen Sie sich den Rolex Oyster Perpetual Submariner-Stift an: Chris Otas reine HTML / CSS-Illustration
Chronograph
Stoppuhren sind ein Synonym für Sport und werden verwendet, um alles von olympischen Rennen bis zur Formel 1 zu messen. In diesem Sinne ist diese reine CSS-Erholung einfach und schön. Die Bewegung ist bemerkenswert, ohne überwältigend zu sein.
Schauen Sie sich den Timer auf dem Hilo-Stift an
Weltweit
Die wahrscheinlich relevanteste Verwendung für eine Online-Uhr ist die Anzeige von Messwerten aus mehreren Zeitzonen. Dieses großartige Snippet verwendet Vue.js und nutzt den Browser, um die Zeit auf der ganzen Welt anzuzeigen. Beachten Sie, wie sich die Anzeige je nach Uhrzeit am ausgewählten Ort von Tag zu Nacht ändert.
Siehe Pen Vue-Zeitvergleich von Sarah Drasner
Zeit ist um
Die Bereitstellungszeit, unabhängig von der Form, fügt Ihrem Projekt eine zusätzliche Detailebene hinzu. Obwohl dies nicht unbedingt das Hauptmerkmal ist, kann es als Informations- und Unterhaltungsmittel dienen.
Zusätzlich zu ihrer Nützlichkeit im Webdesign sind diese Uhren und Timer auch eine hervorragende Einführung in die Funktionsweise von Sprachen wie JavaScript. Wenn Sie sich eines der obigen Codefragmente ansehen, werden Sie verstehen, wie diese verschiedenen Codefragmente kombiniert werden.
Egal, ob Sie Ihrer Website Interaktivität hinzufügen oder es einfach ausprobieren möchten, in dieser Sammlung ist etwas für Sie dabei. Weitere Beispiele finden Sie in unserer CodePen-Sammlung.
