12 Tendencias de animación de desplazamiento a vista esenciales
Los elementos de página animados son muy comunes en páginas de inicio y sitios web de inicio. Pero no siempre se habla de ellos en círculos de diseño porque la idea de "animar a la vista" no se cubre demasiado.
Uso la frase scroll-to-view porque parece una descripción precisa. Básicamente, al desplazarse hacia abajo, aparecen nuevos elementos animados.
No es una técnica que funciona para cada sitio web, pero agrega un toque agradable en ciertos diseños. Y he seleccionado algunos de mis favoritos aquí para mostrar cómo funcionan estas animaciones de desplazamiento a vista y por qué puede intentar usarlas usted mismo.
1. Mañana dormir
Sobre el Mañana dormir sitio web notará algunos efectos animados bastante benignos. Estos desvanecen diferentes fragmentos de texto y CTA a la vista en todo el diseño.
Lo que es interesante es cómo la mayoría de las imágenes y áreas de fondo son completamente visibles incluso en el primer desplazamiento. Muchos sitios web usan animación de desvanecimiento para mostrar imágenes y capturas de pantalla mientras mantienen el texto visible.
Esta pequeña diferencia ayuda a llamar la atención sobre el texto a medida que se desvanece. Una excelente manera de captar la atención de los visitantes que navegan a lo largo.
2. Giro
Otra técnica que a menudo veo es dirigir la mayor parte del contenido de la página para animaciones en desplazamiento.
Por ejemplo, el Twist página de inicio de la aplicación incluye diversos segmentos de página y bloques de texto que se activan y desaparecen en el desplazamiento. Estos tienen un efecto de desvanecimiento muy suave, por lo que son notables pero no demasiado duros.
Algunos visitantes pueden molestarse por el retraso, pero no creo que sea demasiado largo. Además, solo se anima una vez, por lo que si tocas el final de la página, todas las animaciones estarán listas.
3. Aplicación de hilo
Para animaciones mucho más complejas echa un vistazo a la Aplicación de hilo módulo de aterrizaje Este tiene animaciones de varias partes e incluso elementos que se ven desde diferentes ángulos.
Algunas de las imágenes de demostración de captura de pantalla se animan hacia arriba, mientras que los patrones de texto / BG que se acompañan se animan a la vista. Este estilo alternativo es bastante único y no es algo que veo a menudo.
Sin embargo, la página de inicio también es increíblemente simple y no hay mucho más aquí para llamar la atención. En este caso, las animaciones variables funcionan bien.
4. DashFlow
De todos estos ejemplos, creo DashFlow usa las técnicas de animación más comunes.
Este módulo de aterrizaje anima imágenes y texto para ver todo en una sola sesión. Es muy simple y utiliza un diseño de una sola columna para que todo el contenido fluya directamente hacia abajo en una ruta lineal.
Nada inherentemente especial sobre este diseño más allá del método muy claro de animar elementos en desplazamiento. Un gran estilo si tienes un sitio web similar y deseas mantener las animaciones simples.
5. Promover Quuu
Promover Quuu mantiene las animaciones al mínimo y solo las usa en áreas CTA.
No puedo decir si esto aumenta las conversiones, pero parece ser el objetivo. Cuando carga la página por primera vez, el encabezado superior se anima a la vista con una animación inclinada en la CTA.
A medida que te desplazas hacia abajo notarás que el resto de la página es bastante estático. Pero en la parte inferior hay una CTA final encima del pie de página que también anima y ejecuta la misma animación de inclinación.
Va a mostrar que puede tener efectos de animación en desplazamiento que no se ejecutan en toda la página.
6. Qonto
La página de inicio para Qonto tiene una visión interesante de la animación de desplazamiento a vista. Utiliza el mismo tipo de animación en todo el sitio web y anima elementos individuales para visualizar desde un lado.
Para la mayoría de la página, esto incluye secciones de íconos que tienen un pequeño gráfico sobre algún contenido que explica las características de la aplicación. No demasiado sutil pero tampoco demasiado abierto tampoco.
Además, puedes encontrar algunos otros estilos de animación en el encabezado junto con algunas imágenes de BG que se desvanecen a la vista. Esta página es solo un magnífico ejemplo de lo que animación web puede hacer.
7. caminata
Para ver un ejemplo de animaciones sutiles echa un vistazo Caminata .
Su página alterna entre elementos animados y elementos fijos. Pero los efectos de la animación son rápidos, por lo que no te molestará esperar contenido visible.
Esta es mi preferencia para cualquier efecto de desplazamiento a animación. Siempre es una técnica hermosa, pero el tiempo debe ser rápido y directo. Nadie quiere esperar a que el contenido aparezca y Hike entiende esto claramente.
8. Proyecto Fi
Si hay alguien que conoce excelentes UX es Google. Y en todos sus productos tienen toneladas de páginas de inicio, Proyecto Fi siendo un ejemplo con algunas fantásticas animaciones.
Estos solo se aplican a iconos y no se desvanecen en la vista, sino que aparecen en la parte inferior de la página. A medida que se desplaza, encontrará iconos que se deslizan hacia la vista para cada sección pequeña.
Es un efecto bastante sutil pero agrega algo de vida al diseño. Y se basa únicamente en la posición del espectador en la página, por lo que si te desplazas hacia la parte superior y vuelves a bajar, serás saludado por los mismos efectos de animación.
9. Base
los Base de la página CRM es un excelente ejemplo de animación simple en el trabajo. Este sitio usa efectos de animación personalizados para mover las imágenes hacia la línea del ojo del espectador.
Según el número de páginas de destino que veo a diario, esto es muy típico de lo que espero. No es realmente una animación compleja para recrear y tampoco afecta mucho la experiencia.
Una cosa que deseo es que las animaciones se carguen un poco más rápido. Pero más allá de eso, creo que este es un excelente ejemplo de animación de imágenes en desplazamiento con un diseño muy limpio para arrancar.
10. AnyList
Todas las mejores aplicaciones móviles tienen sus propios sitios web para promoción. Y los mejores suelen tener algunos estilos de animación bastante elegantes.
AnyList mezcla algunas técnicas diferentes juntas en una página. Su imagen de encabezado se anima desde debajo del área de corte, pero es la única animación "en movimiento" en la página.
Todo lo demás simplemente desaparece a la vista y todo utiliza un tiempo de carga bastante rápido para la animación. Estas técnicas se usan en otras partes del sitio, lo que le da una sensación más cohesiva.
11. Ernest
El estilo de página para Ernest es un poco diferente a otras páginas de inicio que he cubierto.
Usa animaciones de desplazamiento de paralaje para crear movimiento en un diseño de página única con diferentes secciones.
Estos varían según la dirección en la que se desplaza, ya sea que suba o baje, ya qué velocidad. También varían con la intensidad según las diferentes secciones de la página.
Puede navegar usando el menú de navegación de puntos laterales y esto rápidamente salta alrededor de la página a diferentes áreas. Es una de las pocas técnicas que a menudo verás en las páginas de paralaje y ciertamente ayuda a Ernest a destacarse entre la multitud.
12. TaxiNet
Para echar un vistazo a las animaciones de página completa en acción, eche un vistazo al TaxiNet sitio web.
Es una mezcla heterogénea de efectos de animación basados en desplazamiento vinculados a iconos, texto, imágenes e incluso estilos de fondo. Los colores individuales de fondo de la página se animan a la vista con el usuario, definitivamente no es una técnica típica, pero ciertamente una interesante.
Si te gusta este estilo, puedes aplicar un enfoque similar a tu propia página de aterrizaje. Solo asegúrate de mantener las animaciones ágiles y rápidas porque nadie quiere esperar a que se carguen tus animaciones ordenadas.
Pero si los haces bien, estos elementos de desplazamiento a vista añaden un efecto agradable a cualquier página de destino.
