» » Efecto Del Logotipo Colapsado

Efecto Del Logotipo Colapsado

Efecto Del Logotipo Colapsado

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.

Efecto Del Logotipo Colapsado

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

Deja un comentario

Información
Atención! Usuarios que están en este grupo no pueden dejar comentarios en la página...Primero debes Registrarse!

Redes Sociales

Cómo publicar videos más largos en tus historias de Instagram

Cómo publicar videos más largos en tus historias de Instagram

Si a veces subes videos a tus historias de Instagram , probablemente te has topado con el límite de 15 segundos. Eso significa que no importa la duración del video que publiques en tu historia, Instagram lo recortará automáticamente a una duración máxima de 15 segundos. Esto es ideal para videos...
Recupera Tus Mensajes O Chats De WhatsApp Borrados

Recupera Tus Mensajes O Chats De WhatsApp Borrados

  Recuperar mensajes y chats borrados de tu aplicación WhatsApp para Android es una tarea que puede resultar  necesaria alguna vez. A menudo, estamos tratando de liberar espacio físico de nuestro dispositivo Android y llegamos incluso a borrar...
Integrar El Boton de Whatsapp En Tu Web

Integrar El Boton de Whatsapp En Tu Web

  De todos es conocido que WhatsApp se ha convertido en una herramienta para compartir fotos y vídeos con tus amigos, familiares y compañeros de trabajo. También cada vez más usado, para compartir enlaces de contenidos de la web y otras aplicaciones móviles. Para ayudar a compartir los contenidos...
Crees que las redes sociales te están haciendo bien o mal

Crees que las redes sociales te están haciendo bien o mal

Las redes sociales te ofrecen una forma única de observar a la gente. Por ejemplo, el lenguaje utilizado en Twitter puede usarse para predecir si alguien está en riesgo de morir de una enfermedad cardíaca. El análisis de las actualizaciones de Facebook muestra que las mujeres son generalmente más...
Crea una imagen para las redes sociales

Crea una imagen para las redes sociales

Aprenda a combinar una foto, texto y material gráfico en Photoshop para su Facebook, Twitter y otras publicaciones en redes sociales. Utilice estas habilidades para crear sus propias imágenes de redes sociales o cualquier diseño que cree en Photoshop. Adobe Photoshop es un editor de gráficos...
Comparte instantáneamente tus fotos y diseños

Comparte instantáneamente tus fotos y diseños

Muestre rápidamente su trabajo a clientes y compañeros de trabajo, o comparta una idea al instante por correo electrónico, texto, redes sociales y más, todo dentro de Adobe Photoshop CC. Nota: Necesitará la última versión de Photoshop CC para usar esta función. Comparte tu trabajo ahoraHaz clic en...