Keeping Time: una colección de fragmentos de código de reloj y temporizador

El acto de mostrar el tiempo es bastante popular en la web. Pero no se limita en absoluto a lo que usualmente usamos en nuestra muñeca o lo colgamos en la pared.

Claro, un reloj tradicional puede agregar a la estética de un sitio web o aplicación. Sin embargo, eso solo es realmente útil en ciertas situaciones, teniendo en cuenta que las pantallas de nuestros dispositivos ya muestran los conceptos básicos.

Un área donde el tiempo realmente brilla es contar hacia arriba o hacia abajo. Ya sea que esté mostrando el tiempo transcurrido de un evento, como un cuestionario en línea o la cantidad de días hasta el lanzamiento de 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

Si bien nuestro primer ejemplo puede encajar con relojes más tradicionales, también presenta 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 reloj digital Pen con Vue.js de Toshiyuki TAKAHASHI

Muy meta

Un reloj hecho de … ¿relojes? Puede sonar lejano, pero eso es exactamente lo que es este fragmento de solo CSS. Mire las "manos" en los mini-relojes seleccionados cambiar al unísono para contar el tiempo transcurrido. Al igual que los mejores relojes suizos, los movimientos son increíblemente intrincados.

Vea el reloj de bolígrafo de relojes de Razvan Spatariu

Cuenta atrás para lanzar

Las cuentas regresivas se usan ampliamente para generar anticipación para un gran evento. Tal vez sea un nuevo producto, una conferencia o incluso un estreno de película. Son igualmente divertidos y útiles. Este atractivo ejemplo ofrece una cuenta regresiva de 24 horas en un clásico estilo "flip".

Vea la cuenta atrás del borrador de la pluma de Dorian Camilleri

Las próximas vacaciones siempre están a la vuelta de la esquina

Una cuenta regresiva también puede beneficiar a los sitios de comercio electrónico que desean centrarse en unas vacaciones específicas. En este caso, es el Día de la Independencia en los EE. UU., Pero un elemento disfrazado como este podría ser un gran toque para prácticamente cualquier día especial al que le gustaría llamar la atención.

Vea el bolígrafo DailyUI # 014 Temporizador de cuenta regresiva por Julie Park

Tiempo rapido

Las pantallas de bienvenida parecen estar regresando. Pero en lugar de dejar que los usuarios hagan clic en el siguiente paso, una redirección cronometrada puede ser una buena manera de expresar su opinión sin demasiados inconvenientes. Esta animación de cuenta regresiva de la película de la vieja escuela podría ser perfecta para tal uso.

Vea la cuenta atrás de la película Pen Movie Style de Craig Roblewsky

Un toque de clase

Los relojes de alta gama nunca pasan de moda. Con bellas miradas y movimientos de precisión, capturan la imaginación. Aquí, tenemos una recreación fiel de un reloj Rolex. Tal vez no sea tan útil para su sitio web cotidiano, pero algo que admirar no obstante.

Vea el Submariner perpetuo de Pen Rolex Oyster: ilustración HTML / CSS pura de Chris Ota

Cronógrafo

Sinónimo de deportes, los cronómetros se utilizan para cronometrar todo, desde carreras olímpicas hasta tiempos de vuelta de Fórmula 1. En ese espíritu, esta recreación de CSS puro es simple y hermosa. El movimiento es notable sin ser abrumador.

Mira el cronómetro de la pluma de Hilo

Alrededor del mundo

Quizás el uso más relevante para un reloj en línea es mostrar lecturas de varias zonas horarias. Este magnífico fragmento utiliza Vue.js y aprovecha el navegador para mostrar los horarios de todo el mundo. Observe cómo cambia la visualización de día a noche, dependiendo de la hora en la configuración regional seleccionada.

Vea la comparación de tiempo de Pen Vue por Sarah Drasner

Se acabó el tiempo

La implementación del tiempo, independientemente de la forma, en su proyecto agrega una capa adicional de detalles. Si bien no necesariamente tiene que ser la característica principal, puede servir como un medio para informar y entretener.

Más allá de su utilidad en el diseño web, estos relojes y temporizadores también son una excelente introducción a cómo funcionan lenguajes como JavaScript. Al analizar uno de los fragmentos anteriores, comprenderá cómo se combinan estos diversos fragmentos de código.

Entonces, ya sea que esté buscando agregar algo de interactividad a su sitio web o simplemente esté experimentando, hay algo para usted en esta colección. Y si desea ver más ejemplos, consulte nuestra colección CodePen.

Publicaciones relacionadas

Botón volver arriba