12 tendencias esenciales de animación de desplazamiento para ver
Los elementos de página animados son muy comunes en las páginas de destino y los sitios web de inicio. Pero no siempre se habla de ellos en los círculos de diseño porque la idea de «animar a la vista» no se cubre mucho.
Utilizo la frase desplazarse para ver porque parece una descripción precisa. Básicamente, a medida que se desplaza hacia abajo en la página, aparecen nuevos elementos animados.
No es una técnica que funcione para todos los sitios web, pero agrega un toque agradable a ciertos diseños. Y he seleccionado algunos de mis favoritos aquí para mostrar cómo funcionan estas animaciones de desplazamiento para ver y por qué podría intentar usarlas usted mismo.
1. Dormir mañana
Sobre el Mañana dormir sitio web notará algunos efectos animados bastante benignos. Estos difuminan diferentes partes de texto y CTA a la vista en todo el diseño.
Lo interesante es cómo la mayoría de las imágenes y las áreas de fondo son completamente visibles incluso en el primer desplazamiento. Muchos sitios web usan animaciones que se desvanecen 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 aparece. Una excelente manera de captar la atención de los visitantes que navegan.
2. Gire
Otra técnica que veo a menudo es apuntar a la mayor parte del contenido de la página para animaciones en el desplazamiento.
Por ejemplo el Página de inicio de la aplicación Twist incluye diferentes segmentos de página y bloques de texto que se animan dentro y fuera de la vista en el desplazamiento. Estos tienen un efecto de desvanecimiento muy suave, por lo que se notan pero no demasiado duros.
Algunos visitantes pueden estar molestos por el retraso, pero no creo que sea demasiado largo. Además, solo se anima una vez, por lo que si toca la parte inferior de la página, todas las animaciones están listas.
3. Aplicación Yarn
Para animaciones mucho más complejas, consulte el 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 la captura de pantalla se animan hacia arriba, mientras que los patrones de texto / BG que las acompañan se animan a la vista. Este estilo alterno es bastante único y no es algo que vea a menudo.
Sin embargo, la página de destino también increíblemente simple y no hay mucho más aquí para llamar la atención. En este caso, las diferentes animaciones funcionan bien.
4. DashFlow
De todos estos ejemplos, creo DashFlow utiliza las técnicas de animación más comunes.
Este módulo de aterrizaje anima imágenes y texto a la vista, todo en una sola sesión. Es realmente simple y utiliza un diseño de una sola columna para que todo el contenido fluya hacia abajo en una ruta lineal.
No hay nada intrínsecamente especial en este diseño más allá del método muy claro de animar elementos en el pergamino. Un gran estilo si tiene un sitio web similar y desea mantener las animaciones simples.
5. Quuu Promocionar
Quuu Promocionar mantiene las animaciones al mínimo y solo las usa en áreas de CTA.
No puedo decir si esto aumenta las conversiones, pero ese 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 el CTA.
A medida que se desplaza hacia abajo, notará que el resto de la página es bastante estático. Pero en la parte inferior hay un CTA final sobre el pie de página que también anima y ejecuta la misma animación de inclinación.
Va a demostrar que puede tener efectos de animación en el desplazamiento que no se ejecutan en toda la página.
6. Qonto
La página de inicio de Qonto tiene una versión interesante de la animación de desplazamiento para ver. Utiliza el mismo tipo de animación en todo el sitio web y anima elementos individuales a la vista lateral.
Para la mayor parte de la página, esto incluye secciones de íconos que tienen un pequeño gráfico encima de algunos contenidos que explican las características de la aplicación. No demasiado sutil pero tampoco demasiado abierto.
Además, puede encontrar algunos otros estilos de animación en el encabezado junto con algunas imágenes BG que se desvanecen a la vista. Esta página es solo un magnífico ejemplo de lo que puede hacer la animación web.
7. Caminata
Para ver un ejemplo de animaciones sutiles, consulte Caminata.
Su página alterna entre elementos animados y elementos fijos. Pero los efectos de animación son rápidos para que no se sienta molesto esperando contenido visible.
Esta es mi preferencia por 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 lo entiende claramente.
8. Proyecto Fi
Si hay alguien que conoce una gran experiencia de usuario, es Google. Y en todos sus productos tienen un montón de páginas de destino, Proyecto Fi siendo un ejemplo con algunas animaciones fantásticas.
Estos solo se aplican a los íconos y no se desvanecen a la vista, sino que aparecen desde la parte inferior de la página. A medida que se desplaza, encontrará iconos que se deslizan hacia arriba para cada sección pequeña.
Es un efecto bastante sutil pero le da algo de vida al diseño. Y se basa únicamente en la posición del espectador en la página, por lo que si se desplaza hacia la parte superior y retrocede, recibirá los mismos efectos de animación.
9. Base
La Página de inicio de Base CRM es un excelente ejemplo de animación simple en funcionamiento. Este sitio utiliza efectos de animación personalizados para mover imágenes hacia arriba y hacia la línea de ojos del espectador.
Según la cantidad 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 de recrear y tampoco afecta demasiado 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 scroll con un diseño muy limpio para arrancar.
10. AnyList
Todas las mejores aplicaciones móviles tienen sus propios sitios web para su promoción. Y los mejores suelen tener algunos estilos de animación bastante elegantes.
AnyList combina algunas técnicas diferentes 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 se desvanece a la vista y todo usa un tiempo de carga bastante rápido para la animación. Estas técnicas se utilizan en otras partes del sitio, lo que le da una sensación más cohesiva.
11. Ernest
El estilo de página para Ernesto es un poco diferente a otras páginas de destino que he cubierto.
Utiliza animaciones de desplazamiento de paralaje para crear movimiento en un diseño de página único con diferentes secciones.
Estos varían según la dirección en la que se desplaza, ya sea que se mueva hacia arriba o hacia abajo, y a 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 salta rápidamente por la página a diferentes áreas. Es una de las pocas técnicas que verá a menudo en las páginas de paralaje y ciertamente ayuda a Ernest a destacar entre la multitud.
12. TaxiNet
Para echar un vistazo a las animaciones de página completa en acción, eche un vistazo a la 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 de fondo de las páginas individuales se animan a la vista del usuario, definitivamente no es una técnica típica, pero sí interesante.
Si le gusta este estilo, puede aplicar un enfoque similar a su propia página de destino. Solo asegúrate de mantener las animaciones. rápido y rápido porque nadie quiere esperar a que se carguen tus ordenadas animaciones.
Pero si los hace bien, estos elementos de desplazamiento para ver agregan un efecto agradable a cualquier página de destino.
