Animar las etiquetas (label) de un formulario con CSS y JavaScript

FlyLabel.js es un recurso novedoso, al menos para mi, ya que desde que investigo en busca de nuevos proyectos para publicar en esta bitácora es la primera vez que encuentro una herramienta para animar las etiquetas

Este recurso escrito en JavaScript esta basado en FloatLabel (desarrollado por el programador Matt Smith) permite animar de forma sencilla las etiquetas label de un formulario, logrando un bonito efecto que logra hacer más divertida la tediosa tarea de llenar un formulario web.

Todas las animaciones las pueden encontrar en la demostración online oficial del proyecto.

etiqueta label de un formulario

Desde lo técnico decir que todos estas animaciones fueron logradas mediante el uso de CSS3, principalmente transformaciones.

La compatibilidad con los distintos navegadores esta bastante bien lograda, funcionando perfectamente en los navegadores más modernos y para los más antiguos la biblioteca permite su integración junto a la popular biblioteca Modernizr.js.

FlyLabel no tiene demasiada ciencia, es una biblioteca sencilla para hacer un poquito más divertido un formulario. Igualmente vuelvo a hacer hincapié en que es la primer biblioteca que recuerdo para modificar el comportamiento de los labels de un formulario, una etiqueta HTML bastante olvidada por muchos 😛