Das Anzeigen der Zeit ist im Web sehr beliebt. Aber es ist überhaupt nicht auf das beschränkt, was wir normalerweise am Handgelenk tragen oder an der Wand hängen.
Sicher, eine traditionelle Uhr kann zur Ästhetik einer Website oder App beitragen. Dies ist jedoch nur in bestimmten Situationen wirklich nützlich, wenn man bedenkt, dass die Bildschirme auf unseren Geräten bereits die Grundlagen zeigen.
Ein Bereich, in dem die Zeit wirklich scheint, ist das Hoch- oder Herunterzählen. Unabhängig davon, ob Sie die verstrichene Zeit eines Ereignisses wie ein Online-Quiz oder die Anzahl der Tage bis zu einer großartigen Produkteinführung 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
Unser erstes Beispiel passt zwar eher zu traditionellen Uhren, sieht aber 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 TAKAHASHIs Stift mit der Digitaluhr von Vue.j.
Sehr meta
Eine Uhr aus … Uhren? Es mag weit weg klingen, aber genau das ist dieses Nur-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 kompliziert.
Siehe Razvan Spatariu Uhren Kugelschreiberuhr
Countdown zum Starten
Countdowns werden häufig verwendet, um Vorfreude auf ein großes 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.
Siehe Dorian Camilleris Radiergummi-Countdown
Der nächste Urlaub ist immer um die Ecke
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 USA. Aber ein getarnter Gegenstand wie dieser könnte eine großartige Note für praktisch jeden besonderen Tag sein, auf den Sie aufmerksam machen möchten.
Siehe DailyUI Pen # 014 Countdown Timer von Julie Park
Schnelle Zeit
Begrüßungsbildschirme scheinen wieder zu kommen. Anstatt die Benutzer auf den nächsten Schritt klicken zu lassen, kann eine zeitgesteuerte Weiterleitung eine gute Möglichkeit sein, Ihre Meinung ohne großen Aufwand zu äußern. Diese Countdown-Animation für Filme der alten Schule könnte für eine solche Verwendung perfekt sein.
Sehen Sie sich Craig Roblewskys Countdown im Pen Movie Style an
Ein Hauch von Klasse
High-End-Uhren kommen nie aus der Mode. Mit wunderschönem Aussehen und präzisen Bewegungen regen sie die Fantasie an. Hier haben wir eine originalgetreue Nachbildung einer Rolex-Uhr. Es ist vielleicht nicht so nützlich für Ihre alltägliche Website, aber dennoch etwas zu bewundern.
Sehen Sie sich den Pen Rolex Oyster Perpetual Submariner an: Chris Otas reine HTML / CSS-Illustration
Chronograph
Stoppuhren sind ein Synonym für Sport und werden verwendet, um alles von olympischen Rennen bis hin zu Formel-1-Rundenzeiten 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 die Stoppuhr auf dem Hilo-Stift an
Weltweit
Die vielleicht relevanteste Verwendung für eine Online-Uhr ist die Anzeige von Messwerten aus verschiedenen Zeitzonen. Dieses großartige Snippet verwendet Vue.js und nutzt den Browser, um die Zeitpläne der ganzen Welt anzuzeigen. Beachten Sie, wie sich die Anzeige je nach Uhrzeit im ausgewählten Gebietsschema von Tag zu Nacht ändert.
Siehe Pen Vue-Zeitvergleich von Sarah Drasner
Die Zeit ist um
Durch die Implementierung von Zeit unabhängig von der Form in Ihr Projekt wird eine zusätzliche Detailebene hinzugefügt. Es muss nicht unbedingt das Hauptmerkmal sein, kann aber als Informations- und Unterhaltungsmittel dienen.
Neben 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 Snippets ansehen, werden Sie verstehen, wie diese verschiedenen Code-Snippets kombiniert werden.
Egal, ob Sie Ihrer Website Interaktivität hinzufügen oder nur experimentieren möchten, diese Sammlung bietet etwas für Sie. Weitere Beispiele finden Sie in unserer CodePen-Sammlung.
