Los efectos de paralaje siguen siendo una de las tendencias de diseño web más actuales. Esta técnica de desplazamiento animado ocurre cuando el fondo y el primer plano se mueven a diferentes velocidades, mientras que el usuario se desplaza para que haya dos capas independientes que se mueven al mismo tiempo.
Este efecto se puede utilizar para cualquier número de tipos de sitios web y es una forma divertida de crear y aumentar el compromiso del usuario. Lo bueno de los efectos de paralaje es que no tiene que usarlos en todas las páginas de un diseño; El desplazamiento de paralaje es una excelente técnica de página de inicio para ayudar a los usuarios a realizar llamadas a la acción u otro contenido.
Los efectos de paralaje crean un elemento de profundidad y distancia y un mayor sentido tridimensional que algunas otras técnicas, haciendo que los usuarios se sientan parte del diseño.
La desventaja de los efectos de paralaje es que no siempre funcionan en dispositivos móviles. (Pero también hay algunas soluciones para esto en el tutorial al final de este artículo).
Aquí hay cinco efectos de paralaje y estilos a considerar. (Asegúrese de hacer clic en los enlaces para ver exactamente cómo funciona cada animación).
1. Animación para mostrar el cambio.
Use efectos de paralaje para mostrar el cambio en un proyecto. Las capas de movimiento pueden transmitir una distancia en el tiempo, el espacio o la ubicación.
Parallax efectúa el mejor cambio de escaparate cuando trabajan con el contenido del sitio web.
La evolución de Porsche, arriba, muestra cambios en el tiempo con cambios en el fondo y el automóvil en el primer plano de cada imagen. (Sube el sonido y la música cambia por década, también.)
El diseño mantiene a los usuarios desplazándose porque desea ver cómo se verá el automóvil a continuación. Esta técnica puede funcionar en orden cronológico (como se ve aquí) o en orden cronológico inverso. Y una clave para hacer que funcione es que este sitio funciona en ambas direcciones, incluso la música retrocede, si se desplaza hacia arriba o hacia abajo.
Sonance usa paralaje para mostrar otro tipo de cambio: el cambio de ubicación en todo el diseño. Los efectos de paralaje son parte del patrón de navegación general del sitio web y hay una indicación de dónde se encuentran los usuarios en el diseño (ubicación) a lo largo de la experiencia.
2. Fomentar el desplazamiento
La razón por la que los efectos de paralaje pueden ayudar a crear participación es porque fomentan el desplazamiento para mantener a los usuarios interactuando con el diseño durante un período de tiempo más prolongado.
Muchos diseños que ofrecen efectos de paralaje incluyen un? Scroll? Instrucciones o indicaciones directamente en la página de inicio para ayudar a fomentar esta interacción desde el principio. (La página de inicio de The Walking Dead Zombiefied incluye esta instrucción en la página antes de la imagen destacada arriba).
El sitio web de Walking Dead hace algo un poco diferente con el paralaje para fomentar la interacción: el desplazamiento lleva a los usuarios a través de la pantalla a medida que el personaje se mueve a través de diferentes paneles de estilo cómico, en lugar de arriba y abajo.
3. Movimiento y color.
Una de las formas más divertidas de utilizar el desplazamiento de paralaje es incorporar el color en diferentes paneles de contenido. Para mostrar elementos o proyectos de cartera. El cambio de color y la animación pueden significar algo nuevo.
El color también es una herramienta de diseño que llama la atención y puede ayudar a atraer usuarios.
Werkstatt, arriba, usa un contorno blanco y gris de inicio con capas de paralaje entre elementos y texto. Pero una acción de desplazamiento adicional da vida a cada proyecto con color. La combinación de efectos funciona bien porque el resto del diseño es simple y alienta a los usuarios a interactuar con cada elemento individual.
Lois Jeans toma otro enfoque de paralaje utilizando el color. Cada nuevo color resalta una parte diferente de la campaña de ropa: los compradores pueden ver los pantalones vaqueros en modelos en diferentes entornos naturales con fuego, aire, agua y tierra.
4. Hacer que la información sea más fácil de digerir
Los efectos de paralaje pueden ayudar a que la información compleja o los bloques pesados de texto sean más pequeños, más legibles y más fáciles de digerir. Es un concepto interesante cuando se piensa en mover tipos, pero la práctica real involucra mover contenedores que contienen tipos.
Los ejemplos anteriores muestran dos aplicaciones diferentes de este concepto.
Melanie David tiene una larga introducción sobre ella acerca de la pantalla. El lado izquierdo que muestra el elemento de navegación - Acerca de - no se mueve mientras los usuarios pueden desplazarse por el texto de la derecha. Cuando el bloque de texto finaliza, ambos lados de la página se mueven a la siguiente sección. Es una gran solución para un bloque de texto que es más largo que el área de contenido visual.
El restaurante Le Duc utiliza bloques individuales para diferentes secciones del menú que aparecen según la forma en que leería y ordenaría los alimentos. Las animaciones son simples con el fondo divertido de peces, que les dice a los usuarios algo sobre el establecimiento de comida, y hace que el menú sea fácil de digerir.
5. ¿Visualizar? ¿Digital? Realidad
Uno de los mayores usos de los efectos de paralaje es ayudar a los usuarios a visualizar algo que de otra manera no pueden ver. Más diseños utilizan una combinación de animación tridimensional y de paralaje para crear experiencias más realistas.
Estos diseños en 3D tienden a caer en el ámbito de una experiencia con más estilo de dibujos animados, como Madwell, más arriba, pero también pueden tener una sensación de RV más cuando el diseño funciona con un tipo específico de dispositivo.
Uno de los ejemplos clásicos de un sitio que utiliza efectos de paralaje que ha existido durante algún tiempo es el sitio web de Seattle Space Needle. Utiliza una técnica de desplazamiento ascendente para imitar cómo se vería subir hasta la cima del punto de referencia.
El desplazamiento de paralaje mueve el horizonte hacia el interior del edificio con algunos mensajes de llamada a la acción y una excelente barra de navegación que muestra qué tan alto está la ubicación. El diseño es educativo, aventurero y muestra al usuario algo que es difícil de imaginar sin el efecto animado.
3 grandes recursos de paralaje
¿Listo para crear un efecto de paralaje para su próximo proyecto? Estos tutoriales y fragmentos de código te ayudarán a agregar un efecto animado a tu diseño que puede ayudar a atraer usuarios y mantenerlos comprometidos por más tiempo.
- Cómo crear un efecto de desplazamiento Parallax: el tutorial de w3schools lo lleva a través de la creación de efectos de contenedor móvil y proporciona formas de usar consultas de medios para obtener un efecto similar en dispositivos móviles.
- Parallax Scrolling Website Demo: vea exactamente cómo funciona esta técnica con una simple demostración y explicación.
- 15 Captivating Parallax Effects de CodePen: La lista muestra algunos excelentes bolígrafos de paralaje para impulsar tu creatividad y puedes jugar con cada uno.
Conclusión
Si bien los efectos de paralaje son modernos y divertidos, no lo son para todos los proyectos. También es importante tener en cuenta que la audiencia en algunos dispositivos puede tener problemas para navegar por un sitio web que incluye mucha animación.
Haga un inventario de sus usuarios y sus preferencias antes de agregar un efecto de paralaje. Comience poco a poco con el paralaje en una ubicación, como la página de inicio, y realice un seguimiento de los análisis para ver si está funcionando para usted (mayor tiempo en el sitio es una pista de que está funcionando).
Use paralaje cuando trabaje con su contenido y mensajería. Esta técnica moderna debe ser divertida para diseñar e interactuar con ella.