Share
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!
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..
Primero, debemos crear nuestras imágenes..
Seleccione la "Herramienta de Ractangle 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 Layer> Rasterize> Shape o Right Click> Rasterize Layer. 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 Paint Bucket Tool (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 configura 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 de cosecha (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):
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 "Atrás" 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..
Crear un reloj animado Flip Down 
Lo principal que tenemos que hacer ahora es superponer los divs "frontales" y "atrasados". Primero colocamos la envoltura principal donde la necesitamos y luego damos la misma posición absoluta a ambos contenedores.
#wrapper posición: absoluta; superior: 100px; izquierda: 400px; #front, #back position: absolute; arriba: 0px;
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.
#upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; altura: 63px; alineación vertical: parte inferior; visibilidad: visible; #lowerPart img position: relative; altura: 63px; alineación vertical: superior; visibilidad: visible; #lowerPartBack img position: relative; alineación vertical: superior; #upperPartBack img position: relative; alineación vertical: parte inferior;
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á.
#hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack width : 63px;
Aquí está todo junto:
cuerpo fondo: # 000; #wrapper posición: absoluta; superior: 100px; izquierda: 400px; #front, #back position: absolute; arriba: 0px; #upperPart, #upperPartBack vertical-align: bottom; #lowerPart, #lowerPartBack vertical-align: top; #upperPart img position: relative; altura: 63px; alineación vertical: parte inferior; visibilidad: visible; #lowerPart img position: relative; altura: 63px; alineación vertical: superior; visibilidad: visible; #lowerPartBack img position: relative; alineación vertical: superior; #upperPartBack img position: relative; alineación vertical: parte inferior; #hoursUp, #hoursDown, #hoursUpBack, #hoursDownBack width: 126px; #MinutesUpLeft, #minutesUpRight, #minutesDownLeft, #minutesDownRight, #minutesUpLeftBack, #minutesUpRightBack, #minutesDownLeftBack, #minutesDownRightBack, #secondsUpLeft, #secondsUpRight, #secondsDownLeft, #secondsDownRight, #secondsUpLeftBack, #secondsUpRightBack, #secondsDownLeftBack, #secondsDownRightBack width : 63px;
En primer lugar, necesitamos algunas variables para almacenar el tiempo que se muestra en los pads. Nota: h = horas, m1 = el dígito del minuto izquierdo, m2 = el dígito del minuto derecho, s1 = el segundo dígito izquierdo, s2 = el segundo dígito derecho.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1;
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.
function retroClock () now = new Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; si (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12;
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..
Accentsconagua
if (h! = h_current) flip ('hoursUp', 'hoursDown', h, 'Single / Up /' + ap + '/', 'Single / Down /' + ap + '/'); h_current = h; if (m2! = m2_current) flip ('minutesUpRight', 'minutesDownRight', m2, 'Double / Up / Right /', 'Double / Down / Right /'); m2_current = m2; voltear ('minutesUpLeft', 'minutesDownLeft', m1, 'Double / Up / Left /', 'Double / Down / Left /'); m1_current = m1; if (s2! = s2_current) flip ('secondsUpRight', 'secondsDownRight', s2, 'Double / Up / Right /', 'Double / Down / Right /'); s2_current = s2; voltear ('secondsUpLeft', 'secondsDownLeft', s1, 'Double / Up / Left /', 'Double / Down / Left /'); s1_current = s1; // terminar retroClock 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.
función flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("visibilidad", "visible"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("visibilidad", "visible"); Ahora cambiamos la almohadilla posterior superior e inferior al nuevo valor.
$ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ". png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ". png";
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.
var flipUpper = new Fx.Tween (upperId, duration: 200, transición: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': function () var flipLower = new Fx.Tween (lowerId, duration: 200, transición: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': function () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("visibilidad", "hidden"); $ (upperId) .setStyle ("visibilidad" , "oculto");); flipLower.start ('height', 64);); flipUpper.start ('altura', 0); // fin del flip Lo último que hay que hacer es hacer que nuestra función principal se ejecute cada segundo..
setInterval ('retroClock ()', 1000) ;; Aquí está todo junto.
var h_current = -1; var m1_current = -1; var m2_current = -1; var s1_current = -1; var s2_current = -1; función flip (upperId, lowerId, changeNumber, pathUpper, pathLower) var upperBackId = upperId + "Back"; $ (upperId) .src = $ (upperBackId) .src; $ (upperId) .setStyle ("height", "63px"); $ (upperId) .setStyle ("visibilidad", "visible"); $ (lowerId) .setStyle ("height", "0px"); $ (lowerId) .setStyle ("visibilidad", "visible"); $ (upperBackId) .src = pathUpper + parseInt (changeNumber) + ". png"; $ (lowerId) .src = pathLower + parseInt (changeNumber) + ". png"; var flipUpper = new Fx.Tween (upperId, duration: 200, transición: Fx.Transitions.Sine.easeInOut); flipUpper.addEvents ('complete': function () var flipLower = new Fx.Tween (lowerId, duration: 200, transición: Fx.Transitions.Sine.easeInOut); flipLower.addEvents ('complete': function () lowerBackId = lowerId + "Back"; $ (lowerBackId) .src = $ (lowerId) .src; $ (lowerId) .setStyle ("visibilidad", "hidden"); $ (upperId) .setStyle ("visibilidad" , "oculto");); flipLower.start ('height', 64);); flipUpper.start ('altura', 0); // finaliza la función flip retroClock () now = new Date (); h = now.getHours (); m1 = now.getMinutes () / 10; m2 = now.getMinutes ()% 10; s1 = now.getSeconds () / 10; s2 = now.getSeconds ()% 10; si (h < 12) ap = "AM"; else if( h == 12 ) ap = "PM"; else ap = "PM"; h -= 12; if( h != h_current) flip('hoursUp', 'hoursDown', h, 'Single/Up/'+ap+'/', 'Single/Down/'+ap+'/'); h_current = h; if( m2 != m2_current) flip('minutesUpRight', 'minutesDownRight', m2, 'Double/Up/Right/', 'Double/Down/Right/'); m2_current = m2; flip('minutesUpLeft', 'minutesDownLeft', m1, 'Double/Up/Left/', 'Double/Down/Left/'); m1_current = m1; if (s2 != s2_current) flip('secondsUpRight', 'secondsDownRight', s2, 'Double/Up/Right/', 'Double/Down/Right/'); s2_current = s2; flip('secondsUpLeft', 'secondsDownLeft', s1, 'Double/Up/Left/', 'Double/Down/Left/'); s1_current = s1; //end retroClock setInterval('retroClock()', 1000); ¡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.!
