Guía / Artículo

Menú de pantalla completa de fluidos

Matthewpmunger
30 de octubre de 2020
Menú de pantalla completa de fluidos

Aquí hay un botón de conmutación que anima en un menú de pantalla completa. El reto era convertir una forma de círculo en una forma de rectángulo de la ventana del navegador. Es sensible y funciona sin importar la orientación de la pantalla.

Capas

Hay tres elementos principales para hacer posible esta interacción. Puedes pensar en ellas como capas si eso ayuda.

  • Botón de cambio de hamburguesa o menú
  • Menú Fondo
  • Menú

Animación

Hay dos interacciones de clic en el hamburguesa. La primera interacción vino con él cuando lo copié del proyecto clonado de Burgers Vol 1. La segunda interacción es el control de la menú y menu-bkgdelementos.

Se hizo necesario controlar la trayectoria de movimiento y el crecimiento por separado.

  • menu-bkgd actúa como un ancla moviendo el círculo de la esquina al centro
  • menú-bkgd__envoltura es el contenedor para el círculo
  • menu-bkgd__circulo está anidado dentro de los buceos anteriores

Con los controles de interacción existe la posibilidad de ajustar el tiempo con Easing, sin embargo para conseguir una animación más orgánica y suave necesitamos movernos en un camino no lineal. No más A⇢B. Para obtener una trayectoria vectorial curva de movimiento, es necesario separar el movimiento a lo largo de los ejes X e Y e invertir la relajación.

¡Sí! Ahora obtenemos una trayectoria de animación curva suave. El resto de las animaciones de interacción son las normales de movimiento, escala, etc.

Para ver mejor de lo que estoy hablando, el conmutador de abajo activará los bordes de los elementos principales y activará interacciones que son 10 veces más lentas de lo normal. Pruébalo.

Matthewpmunger
30 de octubre de 2020

Matthewpmunger

Ver perfil del autor

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.