7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. HTML & CSS

Aprende cómo crear un reloj retro animado abatible

Read Time: 10 mins

Spanish (Español) translation by Elías Nicolás (you can also view the original English article)

En este tutorial, crearemos un reloj animado plegable de los años 70. Usando el marco de Mootools, intenté replicar la acción de voltear las almohadillas y hacerlas lo más realistas posible. Con su estilo retro, podría ser algo realmente bueno para agregar a su sitio web, ¡así que comencemos!


Detalles del tutorial

  • Programa: Mootools
  • Dificultad: Fácil
  • Tiempo estimado de finalización: ~ 1 hora

Paso 1: El concepto principal

El reloj está compuesto por tres grupos de imágenes: horas, minutos y segundos, que se dividen en una parte superior y una inferior para que podamos obtener el efecto "flip". La animación principal consiste en reducir la altura de la parte superior del 100% al 0%, y luego aumentar la altura de la parte inferior del 0% al 100% para cada grupo en el que un dígito cambia. Aquí está el esquema básico.

Paso 2: Photoshop

Primero, debemos crear nuestras imágenes.

Seleccione la "Herramienta Ractangulo redondeada" (U), establezca el radio en 10px y el color en #0a0a0a y cree un ractangle de 126px por 126px, puede cambiar la dimensión de acuerdo a sus necesidades, solo mantenga un número par. Resterize la forma yendo a Click Derecho > Rastrear Capa. Ahora queremos crear esa "brecha" entre las dos partes y hacer que el fondo superior sea un poco más claro. Coloque una línea de guía en la mitad horizontal de nuestra almohadilla, luego seleccione la almohadilla de orificio (Ctrl + Clic en el icono de capa) y con la herramienta Rectangular Marquee (M) seleccione la mitad superior en modo intersección (mantenga presionada la tecla Mayús + Alt). Ahora solo tenemos que completar la selección con #121212 usando la herramienta Bote de Pintura (G). Luego, trace una línea negra de 2px usando nuestra línea de guía como ayuda, en una capa separada.

Ahora tenemos que sumar los dígitos. Usando la herramienta de tipo (T), cree una nueva capa con los dígitos y colóquela debajo de la línea que creamos anteriormente.

Solo agrega un poco de superposición en los números para que se vean un poco más realistas. Cree una nueva capa sobre la capa de dígitos, seleccione la parte inferior del teclado y rellene con #b8b8b8, luego llene la parte superior con #d7d7d7. Ahora establece el modo de fusión a "Multiplicar".

De acuerdo. Ahora que tenemos nuestro pad completo, tenemos que dividirlo. La idea principal es dividir el dígito derecho del izquierdo, así que en lugar de tener 60 imágenes para los grupos de minutos y segundos, terminará con 20 imágenes que usaremos para ambos grupos. Básicamente, tenemos que dividir nuestro pad en 4 imágenes con las mismas dimensiones. Utilicé la herramienta Recortar (C) para este trabajo.

Después de recortar el teclado, cambie el dígito y guárdelo cada vez como un .png separado para que termine con todos los archivos que necesita (números del 0 al 9). Repita este paso para todas las partes de la almohadilla. Tenga en cuenta que para el teclado de horas, no separa los dígitos, solo tiene la parte superior e inferior. Al final, aquí está nuestra estructura de carpetas ("Doble" por minutos y segundos, "Individual" por horas):

Paso 3: Marcado HTML

Ahora que tenemos nuestros archivos listos podemos comenzar a codificar. En primer lugar, necesitamos dos contenedores para nuestras imágenes, uno para la "parte superior" de nuestro reloj y otro para la "parte inferior".

A continuación añadimos las imágenes. Aquí hay un esquema con los ID que he usado:

Tuve que usar una imagen espaciadora transparente de 1px de ancho y la misma altura que las otras imágenes para evitar que los contenedores se encojan cuando las almohadillas se mueven. Además, no debe haber espacio entre las imágenes del mismo grupo (por ejemplo, "minutesUpLeft" y "minutesUpRight").

De acuerdo. Estas serán las almohadillas delanteras de nuestro reloj que se moverán hacia abajo, ahora tenemos que configurar las posteriores, de modo que cuando las almohadillas delanteras se muevan, los nuevos dígitos se pueden ver en ellas. Envolveremos lo que hemos hecho hasta ahora en un div y simplemente lo duplicaremos encima de sí mismo, agregando a cada identificación de imagen la palabra "Back" y cambiando al archivo fuente apropiado.

Aquí está el archivo .html completo con referencia a la hoja de estilo y al archivo javascript "animate.js" en el que crearemos la animación.

Paso 4: CSS

Lo principal que tenemos que hacer ahora es superponer los divs "front" y "back". Primero colocamos la envoltura principal donde la necesitamos y luego damos la misma posición absoluta a ambos contenedores.

Ahora necesitamos alinear verticalmente la parte superior con la parte inferior y la parte inferior con la parte superior, para que las almohadillas se vean como si estuvieran ancladas a la mitad del reloj. Agregué las propiedades de altura y visibilidad para las partes delanteras porque las necesitamos para la animación más adelante.

Finalmente, todo lo que tenemos que hacer es restringir el ancho de las almohadillas porque queremos jugar solo con su altura. De forma predeterminada, si cambia uno de ellos, la imagen del agujero se escalará.

Aquí está todo junto:

Paso 5: Creando la animación

En primer lugar, necesitamos algunas variables para almacenar el tiempo que se muestra en los pads. Nota: h = horas, m1 = el dígito de la izquierda, m2 = el dígito de la derecha, s1 = el segundo dígito de la izquierda, s2 = el segundo dígito de la derecha.

Ahora creamos una función que se ejecutará cada segundo y actualizará nuestro reloj. Primero obtenemos la hora actual y determinamos la hora del día, AM o PM.

Luego lo comparamos con el tiempo que se muestra en los pads y cambiamos qué grupo es diferente. Utiliza una función llamada "flip" que describiré en un minuto.

Ahora, la función flip. Tiene algunos parámetros: upperId, lowerId = los identificadores de los pads superiores e inferiores que se voltearán; changeNumber = el nuevo valor que se mostrará; pathUpper, pathLower = las rutas a los archivos de origen para el nuevo valor. La animación se compone de los siguientes pasos:
La almohadilla superior delantera toma el valor de la trasera y se hace visible, superponiéndola, mientras que la inferior también se hace visible pero su altura se cambia a 0px.

Ahora cambiamos la almohadilla posterior superior e inferior al nuevo valor.

Teniendo esta configuración podemos iniciar la animación real. Como mencioné anteriormente, consiste en reducir la altura de la parte superior delantera a 0%, 0px, y aumentar la altura de la parte inferior delantera a 100%, 63px en este caso. Una vez que se completa la animación, la almohadilla inferior inferior toma el nuevo valor y las almohadillas delanteras se ocultan.

Lo último que hay que hacer es hacer que nuestra función principal se ejecute cada segundo.

Aquí está todo junto.

Terminado

¡Terminamos! Espero que hayas disfrutado trabajando en este pequeño proyecto, tiene un concepto algo complejo, pero al final es un gadget muy bueno para tus sitios web. Por favor, no dude en enviarnos cualquier sugerencia que pueda tener!

  • Síganos en Twitter, o suscríbase a Nettuts+ RSS Feed para obtener más artículos y artículos de desarrollo web diarios.


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Scroll to top
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.