0
191
VistasDesplácese y deje que el contenido se adhiera mientras anima
Me pregunto cómo lograr la siguiente animación de desplazamiento, donde la copia STRATEGY y CREATIVE se acopla en la parte superior y luego se anima mientras el usuario se desplaza, y cuando finaliza la animación, la página continúa desplazándose.
Consulte el ejemplo de página aquí: https://www.mrsandmr.com/
¿Cómo se llama esto en teoría?
Gracias
1 Respuestas
Responde la pregunta0
Recientemente también investigué un poco sobre esto, principalmente inspirado por el impresionante diseño web en las páginas de productos de Apple, como esta .
Aquí hay un buen artículo que encontré en Medium, que explica cómo lograr tales animaciones de desplazamiento: Cómo animar su sitio web como Apple con JavaScript
El resultado está disponible en la página de demostración aquí .
Como se resume en la sección TL;DR:
To sum it all up, the mechanism of how it works is really just: 1. A scrolling container 2. position: sticky;elements 3. JavaScript that converts scroll position of the scrolling container to styles for sticky elements 4. (Sometimes) CSS transition propertyLógica de animación para estrategia/creatividad en "Mrs&Mr"
Lo dividiría en las siguientes fases de animación:
-
translateXdesde el exterior (en relación con la posición de desplazamiento) hasta que los 2 elementos alcancen el centro de la ventana gráfica - Ahora
rotatehasta 180 ° nuevamente en relación con la posición de desplazamiento - Nuevamente,
translatepero fuera de la ventana gráfica