Encienda sus menús usando la animación con CSS

[dieciséis]

En este artículo vamos a trabajar con un común. Diseño de ui Elemento: un menú palanca. Vamos a crear el menú (y un icono para ir con él) con CSS, y hacer que llegue con vida con las animaciones. Nos aseguraremos de que las animaciones sean significativas, pero también se aplican las mejores prácticas de rendimiento web para garantizar que sean lo más suaves posible.

Usted puede Vista previa del resultado final aquí . Cuando el usuario hace clic en el icono Menú, ampliaremos la placa de fondo del icono (un círculo) para cubrir la pantalla y presentará la superposición del menú.

En lugar de simplemente flash a un icono cercano, vamos a animar y morph las tres líneas verticales (que conforman el icono del menú) en un 'X', para representar un icono de cierre. En otras palabras, a medida que se revela el menú, el icono se transforma en un botón de cierre.

Elementos relacionados

¿Podría estar pensando ', es una animación significativa?' Bueno, gran pregunta. Respuesta corta: ¡Sí! Respuesta más larga: las animaciones son excelentes para conectar elementos en la pantalla, y mostrar cómo se relacionan entre sí.

A medida que ampliamos la placa de fondo del menú para convertirse en el menú, mostramos cómo están conectados los dos, similares a cómo un icono de aplicación, cuando se presiona en iOS o Android, se escala y se lleva a la pantalla, mostrando que la aplicación se lanzó desde ese mismo icono Nuestro icono de menú no solo cambia el menú: es el menú, solo se derrumbó.

Del mismo modo, al igual que cómo una palanca de encendido / apagado se transforma entre su estado de encendido y apagado cuando lo presiona en iOS, nuestro dispositivo de menú cambiará entre un icono de menú y un icono de cierre dependiendo de si el menú de nuestro sitio es visible u oculto. Esto ayuda a hacer cumplir la idea de que los dos iconos funcionan de manera similar: ambos controlan el menú.

Así que, mientras estamos haciendo que nuestro sitio sea divertido de usar, también estamos haciendo que sea más fácil de entender y mejorar el experiencia de usuario muy ligeramente.

Vea cómo hacer esto en el tutorial de video arriba y los pasos escritos a continuación.

01. Comienza

Descarga los archivos del proyecto. . Abrir index.html En un navegador y deberías ver tres grandes enlaces contra un fondo blanco. Esta es la superposición del menú que revelaremos.

En primer lugar necesitamos ocultarlo. En Styles.css , añade estos estilos a .Menu-Overlay :

 Opacidad: 0;
VISIBILIDAD: Oculto; 

Con la superposición desaparecida, debe aparecer un botón en la esquina superior izquierda. Hagamos el icono de nuestro menú aquí, por lo que hay algo para hacer clic para mostrar la superposición. Para que sea fácil de animar, lo dibujaremos usando solo HTML y CSS; No hay mapas de bits ni vectores. Ya tenemos un html en index.html Para el menú: un contenedor ( .menú ), un fondo ( .Menú-círculo ), un enlace ( .Menú-enlace ) y el icono ( Icono .Menú ) Con un lapso para cada línea.

Tener un separado div Porque el fondo es un enfoque algo no convencional. Si no estábamos a punto de agregar animaciones a este círculo, no necesitaríamos un separado. div ; solo podríamos agregar un borde fronterizo y color de fondo a nuestro Enlace de menú .

Sin embargo, queremos ser libres de usar el transformar Propiedad en el círculo, para que podamos escalarlo sin afectar el icono en sí, por lo que necesitamos desacoplar el fondo del icono.

Vamos a empezar a dibujar las líneas que conforman el icono. Que tienen todos ellos en comun? Son igualmente amplios, tienen esquinas redondeadas, están absolutamente posicionadas, y tienen un color de fondo. Dado que todas las líneas comparten el línea de menú Clase, vamos a usarlo para establecer estas propiedades compartidas:

 .Menú-Line {
 Color de fondo: # 333;
 Altura: 2px;
 Ancho: 100%;
 Radio de borde: 2px;
 Posición: Absoluto;
 izquierda: 0;
} 

Luego podemos usar las clases únicas de las líneas para establecer la posición vertical:

 .menu-line-1 {top: 0; }

.Menú-Line-2 {
 TOP: 0;
 fondo: 0;
 Margen: Auto;
}

.Menú-Línea-3 {Parte inferior: 0; } 

02. Añadir un efecto de flotación.

Hagamos claramente el icono, agregue un efecto de flotación. En Styles.css , crea un nuevo selector para Círculo de menú Para escalarlo cuando se mueve sobre el menú:

 .Menú: Hover .Menú-círculo {Transform: escala (1.4); } 

Ahora podemos agregar nuestra primera animación. Agregar "Transición: Todos los 0.2s Fase-In-Out" a .Menú-círculo {} (No al estado de flujo). Les estamos diciendo que el navegador anime todas las propiedades que pueden cambiar para .Menú-círculo . Entonces, cuando lo amplíamos en flotando, se anima en el transcurso de 0.2 segundos a su nuevo estado, con una función de tiempo de aliviar .

¿Cómo sabes qué función de momento elegir? En primer lugar, evite usar una función de sincronización lineal. Pocas cosas en el mundo real se mueven a una velocidad perfectamente constante, por lo que los objetos animados con una función de sincronización lineal tienden a parecer antinatural y rígido (como lo habría dicho Einstein, "Dios no juega dados con una función de tiempo lineal").

Como una regla de oro, Facilitarse Funciona ideal para presentar nuevos objetos, y facilidad en Funciona ideal para eliminar objetos. Y cuando en duda, aliviar Es una función de sincronización sólida para: tiene un comienzo lento y una finalización lenta, creando una animación suave y fluida.

03. Muestra y oculta el menú.

Vamos a usar jquery para mostrar y ocultar nuestra nueva superposición creada. En script.js , alternar la clase de abierto en .Menu-Overlay Dentro del handler de clic existente:

  $ (". Menú-superposición"). Toggleclass ("ABRIR"); 

Luego muestre la superposición cuando tenga una clase de ABIERTE:

 .Menu-Overlay.Open {
 Opacidad: 1;
 Visibilidad: visible;
} 

04. Conecte el icono MENÚ

La transición que agregamos significa anteriormente, ya tenemos un efecto de desvanecimiento limpio que sucede cuando mostramos y ocultamos la superposición. Sin embargo, podemos hacer que se vea como el fondo del icono del menú se convierte en la superposición del menú, y mejor conectar los dos visualmente.

Lograr este efecto es más fácil de lo que parece: todo lo que tenemos que hacer es ampliar rápidamente el círculo de menú cuando se hace clic. La superposición se desvanecerá simultáneamente, creando la ilusión de que el icono del menú se está transformando en la superposición.

Tenemos que poder diseñar el círculo de menú cuando se ha hecho clic en el menú. Abrir script.js , y dentro de nuestra función de clic existente alternando la clase abierta para nuestra .menú :

  $ ("Menú"). Toggleclass ("Abrir"); 

Ahora podemos apuntar a esta clase con CSS y expandir el círculo a medida que se abre el menú. En el fondo de style.csss , ampliar la .Menú-círculo cuando .menú También tiene una clase de .abierto :

.Menu.OPEN .Menu-Circle {Transform: Scale (60);
} 

05. Transformar el icono

Tenemos un hermoso efecto de revelación para nuestro menú, pero ¿cómo volteamos el icono del menú en un icono de cierre? Es sorprendentemente fácil una vez que sepa cómo, solo necesitaremos establecer tres propiedades CSS. En primer lugar, necesitamos ocultar la línea media mientras se muestra el menú:

 .menu.open .Menu-Line-2 {Opacidad: 0; } 

Luego, todo lo que necesitamos hacer es voltear las otras dos líneas de 45 grados en direcciones opuestas (las líneas deben apuntar en diferentes direcciones para formar una 'x', así que tenga en cuenta cómo una de las líneas tiene una rotación negativa de 45 grados):

 .menu.open .Menu-line-1 {
 Transformar: Girar (-45DEG);
}

.Menu.open .Menú-Line-3 {
 Transformar: Girar (45DEG);
} 

Especie de. También necesitamos centrar estas dos líneas verticalmente. En este punto podrías estar pensando '¡Fácil! Solo tenemos que cambiar el cima y fondo Posición para centrarlos '. Y tendrías razón, si no estuviéramos animando este icono.

Ya que solo podemos lograr animaciones aceleradas por hardware al limitarnos a animar la transformar y opacidad Propiedades, tendremos que recurrir a centrar las líneas a través de transformes.

 .menu.open .Menu-Line-1 {
 Transformada: traducido (7px) traducido (-50%) Girar (-45DEG);
}

.Menu.open .Menú-Line-3 {
 Transformar: traducido (-7px) traducido (50%) Girar (45DET);
} 

Estas transformadas moverán las dos líneas para que estén centradas verticalmente dentro del contenedor del icono y luego los giren para formar la cruz.

Vamos a romperlo. Tenemos dos traducciones que se utilizan simultáneamente: traducido (7px) y traducido (-50%) . La primera transformada, traducido (7px) , se utiliza para mover el borde superior de la línea al centro vertical del lienzo. Las matemáticas aquí son simples: 14 es la altura de nuestro icono, dividiéndolo por dos, obtenemos el punto medio: 7.

La segunda transformada, traducido (-50%) , se usa para mover la línea para que el centro vertical de la línea, no su borde superior, reside en el punto central vertical del lienzo.

Generalmente cuando se usa el % Iniciar sesión CSS Usted se refiere al padre de un elemento (configuración Ancho: 100% coincide con el ancho del elemento a la de su padre), pero si usa porcentajes con la propiedad Transform se refiere al elemento en sí, no el padre. Para nosotros encontrar la altura de una línea y moverla hacia arriba por la mitad de eso, todo lo que necesitamos es traducido (-50%) .

06. Morph entre iconos

En lugar de simplemente reemplazar el icono del menú con el icono Cerrar, vamos a morph entre los dos estados.

Empezar agregando una transición a .Menú-Línea en style.csss :

 Transición: Todos los 0.25s se alivian; 

Ta-da! Un icono de menú de transformación. Sin embargo, la animación es un poco aburrida. Vamos a arreglar eso. Para que las líneas parezcan más vívidas, podemos rotarlas a ambos 90 grados adicionales. El icono se verá igual al final, pero las líneas viajarán aún más durante el mismo período de tiempo. Cambiar las rotaciones a Girar (-135DEG) y Girar (135DEG) .

Como regla general, siempre puede mejorar una animación utilizando una curva de Bézier personalizada que está mejor adaptada a su animación. Actualmente estamos usando aliviar - Esto significa que la animación tendrá un inicio y finalización lenta, con un ritmo más rápido en el medio.

Creo que un efecto más similar a la primavera es apropiado para nuestro icono. Vamos a hacer que gire rápido, con un pequeño efecto de rebote a medida que llega a su fin. Para .Menú-Línea , reemplazar " aliviar " Con una curva personalizada de Bézier:

 Transición: Todos los 0.25s Cubic-Bezier (0.175, 0.885, 0.32, 1.275); 

¿Cuáles son todos esos números? No se preocupe: las curvas Bézier rara vez se escriben a mano. Tu usas cúbico-bezier () Para definir el ritmo de una animación con el tiempo, y en lugar de escribirlos por su cuenta, recomiendo usar un sitio de referencia. Esto viene de la faceings.net. Se sobrepasa al final de la animación, y crea un efecto de rebote sutil.

Mientras estamos en eso, ve a facilings.net y agarrar el código para EAXOUTEXPO . Usaremos esto para crear un efecto más refinado para la animación de fondo del menú. Actualizar la transición de .Menú-círculo Para usar esta curva de Bézier personalizada, y haga que la animación sea un poco más larga (0.5s):

 Transición: Todos los 0.5s Cubic-Bezier (0.19, 1, 0.22, 1); 

Felicitaciones, ha creado un conjunto de animaciones que son significativas: le ayudan a comprender lo que está sucediendo en el sitio mientras la navega, creando un sentido de conciencia espacial. Además de eso, las animaciones funcionan sin problemas.

Al animar solo las propiedades de transformación y opacidad, podemos asegurarnos de que el soporte de aceleración de hardware del navegador pueda activar y evitar el retraso innecesario. Cuando juegues con animaciones, asegúrate de marcar estas dos cajas: Hazlas significativas y hermosas.

Este artículo apareció originalmente en revista neta Número 281. Suscríbete a la red aquí .

Artículos relacionados:

• 10 ejemplos impresionantes de la animación CSS3
• 28 Ejemplos sobresalientes de CSS
• Comience con la accesibilidad web