Una recreación del efecto del logotipo colapsante visto en PracticalVR. La idea es tener una vista inicial que anime a un logotipo en la esquina superior izquierda de la página.
Hoy queremos compartir contigo un pequeño efecto de logotipo que colapsa. La idea es tener una vista inicial que se reduzca a un logotipo en la esquina superior izquierda de la página. Luego, se puede hacer clic en el logotipo nuevamente para expandirlo a la vista inicial. El efecto es una recreación del visto en PracticalVR.
Para las animaciones en esta demostración, utilizamos anime.js.
Atención: Tenga en cuenta que usamos propiedades de CSS modernas como la cuadrícula y las variables en esta demostración.
La vista inicial se ve de la siguiente manera:
Al hacer clic en "enter", el fondo de la vista inicial se escala primero en el eje X y luego en el eje Y, lo que da como resultado su nueva posición en la esquina superior izquierda de la página.
La forma en que esto se logra es estableciendo la transformación intro__box en un valor de escala que lo hará estirar por toda la página. Entonces, básicamente, su estado inicial es uno transformado. Entonces solo tenemos que establecer el valor X e Y en 1. Al cambiar el tamaño, debemos asegurarnos de volver a calcular los valores iniciales de la escala.
¡Esperamos que te guste este pequeño efecto y lo encuentres útil!
Referencias y Créditos
Imágenes de Unsplash.com
anime.js por Julian Garnier
Comentarios