Diseño Retro con Mootools

El diseño web con Ajax no tiene límites, hoy os dejo un increible reloj retro creado en Mootools.

El diseño retro está muy logrado, incluso deja caer sus números con un efecto “flip”, como aquellos paneles del aeropuerto que marcaban los números de los vuelos y sus retrasos.

Tres grupos de imágenes, horas, minutos y segundos, divididas en dos, superior e inferior, dividadas por un eje horizontal que pasa por su centro de gravedad. La animación consiste en reducir la imagen superior de un 100% a un 0%, mientras que la inferior aumenta de un 0% a un 100%.

Dos contenedores alojan las imágenes, “upperPart” para las superiores y “lowerPart” para las inferiores.

Toda la información sobre cómo funciona, sus imágenes, su CSS, o la programación de la animación, la podéis encontrar en el manual de net tuds .

Echadle un vistazo porque merece la pena, aunque sólo sea para ver el efecto tan real que genera Mootools.

• Ver ejemplo y descargar código del reloj retro.

Share and Enjoy

Comparte este Blog de Diseño Web

Escrito por Omar Benyakhlef el con la categoría Ajax, Diseño de páginas web, Mootools, Tutoriales. Guarda en tus favoritos este post permalink. Sigue todos los comentarios con el RSS feed de este post. Comentar Post or leave a trackback: Trackback URL.

6 comentarios

• Bitacoras.com dice:
  

  Información Bitacoras.com…

  Valora en Bitacoras.com: El diseño web con Ajax no tiene límites, hoy os dejo un increible reloj retro creado en Mootools. El diseño retro está muy logrado, incluso deja caer sus números con un efecto “flip”, como aquellos paneles del aeropuerto que …..

  diciembre 12th, 2009 at 0:57
• Inicionet dice:
  

  El efecto es increible, pero creo que mas que ajax es javascript ya que no hay nada de programación del lado del servidor.

  diciembre 22nd, 2009 at 19:02
• diseño web dice:
  

  Esta muy bueno y ligero este reloj, gracias por el post

  diciembre 26th, 2009 at 16:04
• Creación Web dice:
  

  Si realmente bueno me gusto mucho, buen aporte gracias.

  Saludos…

  enero 24th, 2011 at 21:59
• Reloj retro con Mootools « Blog de Diseño Web dice:
  

  [...] “Reloj retro con Mootools, ahora está en el Blog de Diseño Web Gloobs [...]

  junio 20th, 2011 at 14:20
• best acne facial wash dice:
  

  I was navigating online for ideas on a new post to write upon and saw your Blog. Although I may agree with your ideas a little bit, I think I will write something that is somewhat at the underside of your article. I like your thoughts though and will write something that is very close to it .

  marzo 16th, 2012 at 2:58

Comments RSS Feed   TrackBack URL