En los últimos años, jQuery se ha convertido en la forma más fácil y mejor soportada de implementar animaciones simples en línea. JavaScript es excepcionalmente bueno en lo que hace y este artículo no es de ninguna manera un argumento en su contra.
Sin embargo, CSS3 ofrece un vistazo a un posible futuro en el que las animaciones básicas se realizan con CSS directo, independientemente de las secuencias de comandos. Hoy analizaremos cómo usar CSS3 para crear un menú de navegación único y divertido que use @ font-face, transforms y transitions.
Introducción
La navegación de su sitio web puede comunicar mucho sobre su negocio o servicio. La navegación limpia y utilizable es un elemento básico en un buen diseño web y siempre es su apuesta más segura.
Sin embargo, si alguna vez creas un sitio que no necesariamente tiene que ser tan profesional, la navegación proporciona un gran lugar para divertirte un poco e insertar algo de personalidad.
Para echar un vistazo a lo que estaremos construyendo, eche un vistazo a la demostración en vivo. He añadido algún contenido de marcador de posición, pero la idea principal aquí es el menú de navegación.
Haga clic aquí para ver la demostración
El HTML
Para comenzar nuestro proyecto, pegue la siguiente plantilla HTML5 en blanco. Tenga en cuenta que he tirado HTML5 Shiv para hacer que IE y HTML5 jueguen bien juntos.
A continuación, arroje una lista simple desordenada en la parte del cuerpo. Incluya algunos enlaces y el texto que desee para los elementos de menú individuales.
Lo creas o no, eso es realmente todo lo que necesitamos aquí. Es posible que volvamos y lo modifiquemos un poco más tarde, pero en general, nuestro menú de navegación seguirá siendo bastante básico y fácil de juntar en solo unos minutos.
Estilos básicos
A continuación, cree un archivo CSS, realice un restablecimiento básico y agregue algunas configuraciones básicas del cuerpo. Dado que este proyecto es tan simple, no necesitamos un gran restablecimiento de CSS sofisticado, pero a menudo ayuda a asegurarnos de que todos los navegadores estén en la misma página con márgenes y relleno.
Lo siguiente que queremos hacer es tomar nuestra lista vertical, hacer que fluya horizontalmente y agregar un efecto de desplazamiento. Haz eso con el siguiente código.
No hay nada aquí que no hayas visto en otros mil lugares. Al flotar una lista desordenada a la izquierda, colocamos todos los elementos de la lista en la misma línea (¡recuerde que debe borrar sus flotantes si agrega más contenido!). Aparte de esto, simplemente hemos espaciado los elementos y hemos aplicado un color de desplazamiento.
Más adelante añadiremos efectos de vuelo más sofisticados, pero es importante que no dependamos completamente de ellos. Si queremos una degradación elegante en todos los navegadores, el menú debería ser completamente funcional sin ningún CSS3. Como puede ver en la imagen a continuación, hemos logrado ese objetivo y ahora deberíamos tener un menú sencillo basado en texto que cambie de color al pasar el cursor.
Personalizando la Fuente
Ya que solo nos estamos divirtiendo quiero usar una fuente loca. Mi opción favorita para implementar fuentes personalizadas en línea es pure @ font-face utilizando la sintaxis Bulletproof @ font-face de Paul Irish.
De esta manera, no tenemos que preocuparnos por los sistemas de terceros, el dominio, el registro, etc. Podemos simplemente encontrar una fuente que nos guste y lanzarla directamente a través de CSS.
Ardilla De Fuente
Configurar las fuentes con @ font-face no es la tarea más fácil si eres un principiante. Primero tiene que encontrar una fuente que sea legal de usar (lo que puede ser un gran dolor de cabeza), luego tiene que rastrear múltiples versiones de la fuente y conectar esas versiones a la sintaxis a prueba de balas; Es un verdadero dolor.
Afortunadamente, Font Squirrel ha eliminado casi todo el trabajo del proceso con sus kits de fuente tipográficos pre-construidos.
Un kit @ font-face contiene todo lo que necesita: las fuentes, el código, un ejemplo, etc. Simplemente navegue por el sitio hasta que encuentre un kit que le guste y haga clic en el botón de descarga. Decidí ir con Kulminoituva bajo la? Novedad? sección. Es una fuente de letra de bloque 3D loca que normalmente nunca usaría, por lo que es perfecta para este proyecto.
Después de descargar el kit, copie las fuentes en el directorio raíz de su página y pegue el texto incluido en su archivo CSS.
Si siguió el enlace de sintaxis a prueba de balas anterior, debe saber qué hace todo este código. Si no es así, lo único que realmente necesita saber es que la primera línea nos dice cómo referirnos a la fuente en otra parte de nuestro código: 'KulminoituvaRegular'
Así que ahora aplicamos una familia de fuentes a los elementos de la lista utilizando el mismo método que utilizaríamos normalmente cuando usamos nuestra nueva fuente como predeterminada.
Y ahora nuestro menú de navegación debería verse mucho más divertido.
Ahora tenemos un pequeño menú de navegación bastante decente. Tenga en cuenta que también aplicamos algunas fuentes de copia de seguridad para que en cualquier lugar que @ font-face no funcione, Helvetica se cargue.
Para terminar, vamos a lanzar algunas animaciones CSS3.
Animando el menu
Actualmente, la mejor manera de hacer animaciones CSS es un proceso de dos pasos que involucra tanto transformaciones como transiciones. Entonces, lo primero que queremos hacer es decidir cómo manipular los objetos en nuestro menú usando una transformación, luego aplicaremos una transición para animar la transformación.
Si echas un vistazo a la fuente que hemos elegido, verás que todas las letras se giran de un lado a otro para darle una sensación descuidada dibujada a mano. Usaremos esto como inspiración para nuestra transformación e introduciremos una rotación más cuando el usuario se desplace sobre un enlace. Para darle aún más énfasis, también introduciremos un efecto de escalado.
Transformando el texto al pasar
Con las transformaciones CSS tenemos cuatro opciones básicas: rotar, escalar, sesgar y traducir (mover hacia la izquierda y hacia la derecha). Ya que no queremos que nuestro texto se distorsione o se mueva demasiado, nos limitaremos a rotar y escalar.
La sintaxis para implementarlos es súper básica y convenientemente idéntica en las versiones de Mozilla, Webkit y Opera.
Como puede ver, simplemente aplicamos una rotación de -10 grados y una ligera escala de 1.2. Ahora, cuando se desplaza sobre un enlace en la navegación, debería aparecer girado y más grande.
Después de jugar un poco con esto, decidí que no me gustaba el hecho de que todos los enlaces giraran de la misma manera. El texto se siente un poco más aleatorio que eso, así que quería introducir algunas variaciones aquí.
La solución es aplicar clases a los elementos de la lista en nuestro HTML para que podamos aplicar estilos de manera independiente de otros.
Ahora que tenemos dos clases diferentes, podemos aplicar una rotación separada a cada uno de los otros enlaces para que los enlaces primero y tercero giren en sentido antihorario y los enlaces segundo y cuarto giren en sentido horario.
Voila! Ahora tenemos un impresionante efecto de rotación flotante. Lo último que queremos arreglar es la transición. Actualmente, al pasar el ratón sobre el texto se produce una rotación inmediata. Queremos que esto sea gradual como lo encontrarías en un efecto jQuery genial.
Animando la Rotación
Nuestro último paso es agregar una transición CSS3 para animar el efecto de desplazamiento. Al igual que con las transformaciones, las transiciones son muy fáciles de implementar y contienen la misma sintaxis básica para Webkit, Mozilla y Opera.
Todo lo que tiene que hacer es establecer la propiedad que desea animar (en este caso, ¿todo?), La duración y la relajación. Puede elegir entre facilidad, lineal, facilidad de entrada, facilidad de salida y facilidad de entrada. Esto afecta a la forma en que la animación aumenta y disminuye.
Como puede ver, aplicamos la misma transición a ambas clases. Siéntase libre de variar esto si lo desea y cambie la transición de la primera o segunda clase.
¡Todo terminado!
Eso completa nuestro menú de navegación. Haga clic aquí para ver la demostración en vivo. Recuerde que puede utilizar estas técnicas de animación en cualquier cosa que desee, no solo en texto. Intenta crear una galería de miniaturas u otra imagen basada en imágenes que use el mismo efecto.
Pensamientos de cierre
Obviamente, los usuarios de IE solo experimentarán un menú sencillo (aunque será completamente funcional). Definitivamente está mejor con JavaScript si desea que las animaciones como esta funcionen en todos los navegadores. Además, el texto tiende a aparecer un poco entrecortado en Webkit durante la transición. Encontré que esto es bastante molesto, pero no pude encontrar una solución (¡déjame saber si lo haces!).
A pesar de los argumentos en contra de su uso, las animaciones CSS son definitivamente divertidas de jugar y extremadamente fáciles de implementar. Deje un comentario a continuación con un enlace a las animaciones CSS3 que haya creado junto con una breve descripción de las propiedades que usó.