El acto de mostrar el tiempo es bastante popular en la web. Pero no se limita a lo que normalmente usamos en la muñeca o colgado en la pared.
Ciertamente, un reloj tradicional puede aumentar la estética de un sitio web o aplicación. Sin embargo, esto es realmente muy útil en ciertas situaciones, teniendo en cuenta que las pantallas de nuestros dispositivos ya muestran lo básico.
Un área donde el tiempo realmente brilla es contar hacia arriba o hacia abajo. Ya sea que esté mostrando el tiempo transcurrido desde un evento, como un cuestionario en línea o la cantidad de días hasta que se lance un gran producto, estos elementos pueden agregar un poco de emoción. Además, pueden desempeñar un papel importante en la experiencia general del usuario.
Echemos un vistazo a algunos fragmentos de código que puede usar para aportar funcionalidad relacionada con el tiempo a sus proyectos.
Un Vue de alta tecnología
Aunque nuestro primer ejemplo puede usarse en relojes más tradicionales, también tiene un aspecto ultramoderno. Construido con Vue.js, muestra cómo el diseño puede agregar un toque de personalidad a las tecnologías más básicas.
Vea el bolígrafo Toshiyuki TAKAHASHI con el reloj digital Vue.js.
Muy meta
¿Un reloj hecho de … relojes? Puede parecer distante, pero de eso se trata este fragmento de CSS. Observe cómo cambian las “manecillas” de los mini relojes seleccionados al unísono para contar el tiempo transcurrido. Al igual que los mejores relojes suizos, los movimientos son increíblemente complejos.
Ver reloj bolígrafo Razvan Spatariu Watches
Cuenta atrás para lanzar
Las cuentas regresivas se usan ampliamente para generar anticipación para un evento importante. Quizás sea un producto nuevo, una conferencia o incluso un estreno de cine. Son igualmente divertidos y útiles. Este atractivo ejemplo ofrece una cuenta regresiva de 24 horas en el clásico estilo “flip”.
Mira la cuenta regresiva del borrador de la pluma de Dorian Camilleri
Las próximas vacaciones siempre vienen
Una cuenta regresiva también puede beneficiar a los sitios de comercio electrónico que desean centrarse en unas vacaciones específicas. En ese caso, es el Día de la Independencia en los Estados Unidos. Pero un artículo disfrazado como este puede ser un gran toque para casi cualquier día especial al que le gustaría llamar la atención.
Ver DailyUI Pen # 014 Timer por Julie Park
Tiempo rápido
Las pantallas de bienvenida parecen estar volviendo. Pero en lugar de permitir que los usuarios hagan clic en el siguiente paso, una redirección cronometrada puede ser una buena manera de expresar su opinión sin demasiado trabajo. Esta animación de cuenta regresiva de la película de la vieja escuela podría ser perfecta para ese uso.
Mira la cuenta regresiva de la película estilo pluma de Craig Roblewsky
Un toque de clase
Los relojes de lujo nunca pasan de moda. Con un aspecto hermoso y movimientos de precisión, capturan la imaginación. Aquí, tenemos una recreación fiel de un reloj Rolex. Puede que no sea tan útil para su sitio web todos los días, pero sí algo para admirar.
Mire la pluma Rolex Oyster Perpetual Submariner: la ilustración HTML / CSS pura de Chris Ota
Cronógrafo
Sinónimo de deporte, los cronómetros se usan para cronometrar todo, desde carreras olímpicas hasta tiempos de Fórmula 1. En este espíritu, esta recreación pura de CSS es simple y hermosa. El movimiento es notable sin ser abrumador.
Mira el temporizador en el bolígrafo Hilo
Alrededor del mundo
Quizás el uso más relevante para un reloj en línea es mostrar lecturas de múltiples zonas horarias. Este magnífico fragmento utiliza Vue.js y aprovecha el navegador para mostrar la hora en todo el mundo. Observe cómo cambia la pantalla de día a noche, dependiendo de la hora en la ubicación seleccionada.
Ver Pen Vue Time Comparison por Sarah Drasner
El tiempo ha terminado
El tiempo de implementación, independientemente de la forma, en su proyecto agrega una capa adicional de detalles. Aunque no es necesariamente la característica principal, puede servir como un medio de información y entretenimiento.
Además de su utilidad en el diseño web, estos relojes y temporizadores también son una excelente introducción al funcionamiento de lenguajes como JavaScript. Si observa uno de los fragmentos de código anteriores, comprenderá cómo se combinan estos diversos fragmentos de código.
Entonces, ya sea que desee agregar algo de interactividad a su sitio o simplemente probarlo, hay algo para usted en esta colección. Y si desea ver más ejemplos, consulte nuestra colección CodePen.
