• 0k
  • 0
Diseño Web \ 27 Octubre 2015

¿Qué es el Efecto Parallax y Cómo Puedes Usarlo?

Todo el mundo está hablando de esto: el efecto Parallax es la nueva tendencia entre los diseñadores web. Pero para nosotros, simples mortales, puede ser algo que nos intimida un poco. ¡Que no cunda el pánico! Aquí estamos para explicarte cómo usarlo (y contarte para qué sirve).

Aquí en Wix, nos dedicamos a hacer de la creación de páginas web una tarea súper sencilla. En la teoría y en la práctica. Es por eso que nos sentamos con algunos de nuestros talentosos diseñadores para que nos expliquen un poco más sobre qué es toda esta revolución del efecto Parallax (¡y que nos den un par de consejos!).

¿Qué es el Efecto Parallax?

Sí, tiene un nombre sofisticado, pero el concepto es sencillo: Básicamente, la imagen o la textura que se encuentra como fondo de pantalla se desplaza más lento que el resto del sitio.
Vamos a pensarlo de la siguiente manera: Si los elementos que se encuentran más superficiales, como botones y menús, se mueven más rápido que aquellos que se encuentran en el fondo, se crea un efecto de profundidad en la pantalla, similar al 3D.
También puedes combinarlo con otras técnicas para darle más vida a tu página web. Ten en cuenta que este tipo de efectos funciona mejor en páginas largas de desplazamiento.

¿Cómo Puedes Utilizarlo?

Como cualquier animación, este efecto es un arma de doble filo: puede convertir a tu página web es una de altísimo nivel de usabilidad, o, por el contrario, convertirla en una pieza de arte abstracta.
No somos críticos de arte, pero puedes confiar en nosotros cuando decimos: la mejor opción es la primera. Para evitar los excesos y manejar al efecto Parallax de la manera correcta, te dejamos estos consejos para que implementes en tu sitio.

En el Editor: Para crear un efecto Parallax, haz clic en el elemento al cual te gustaría reducir su velocidad y luego haz clic en Parallax. Parece una broma, pero no. Es así de fácil.

1) La Regla de Oro: ¡No Te Emociones Demasiado!

Es un error común. Uno se tienta y comienza a añadir el efecto Parallax a cualquier elemento que se le cruce por delante ¡Mantén la calma! Para que este efecto pueda ser disfrutado por tus usuarios, tiene que sobresalir, y eso se consigue gracias a un buen balance de elementos.
Si sientes que le quieres dar más vida a tu página web, intenta con colores, estampas y formas.

2) Cuenta Una Historia en Imágenes 

Para lograr esto, te recomendamos elegir una serie de imágenes que estén relacionadas. Estas tienen que poder contar una historia, estar en armonía la una con la otra y, lo más importante, respetar la identidad de tu marca.
Una vez que hayas optado por algunas, solo tienes que importarlas a tu sitio. Pero… ¿Por qué deberías hacerlo?

  • Tu mensaje se vuelve más poderoso: tendemos a recordar mejor a los productos que se encuentran en historias o en una narrativa. Piensa en todos esos comerciales de televisión o de la radio y te darás cuenta que es un hecho.
  • Tu sitio se vuelve más estético: Tu diseño se verá conducido por hermosas imágenes que están conectadas en una secuencia lógica. El efecto Parallax ayuda a crear una transición casi natural entre las imágenes. Como una cronología.

Inspírate con esta plantilla de Pizzería. 

Template de Site WIX Pizzeria

3) Añade Animaciones 

Añadir animaciones refuerza el efecto dinámico del Parallax. Si las añades de manera gradual, desde abajo hacia arriba, es posible lograr un contraste con la imagen que parecería desaparecer en el fondo y va desde arriba hacia abajo.
De más está decir, que nada es cien por ciento seguro, pero prueba, juega, y descubre qué es lo que mejor funciona para ti. Recuerda que si no te gusta, siempre puedes volver atrás y restaurar el diseño previo.

Inspírate con esta plantilla de personal fitness trainer. 

Personal Trainer Template de Site   WIX

4) Utiliza Elementos Visuales en Primer Plano 

Si le quieres dar un verdadero sentido de profundidad a tu página web, aquí te dejamos la receta secreta: Una fotografía con efecto Parallax en el fondo y en superposición elementos visuales borrosos ¡Esto te ayudará a crear algo similar a una animación de video!
Para lograr el efecto borroso en los elementos, puedes ingresar al Editor de Wix, o cualquier otra herramienta online que te permita editar. Luego superpone estos elementos con la imagen Parallax de fondo ¡el resultado es asombroso!

¡Atención! La imagen en primer plano debe estar en formato PNG sobre un fondo transparente. 

Inspírate con la página que creamos para anunciar el Nuevo Editor

4

 

 

¿Estás listo para comenzar a crear tu página web? ¡Crea tu propia página web gratuita con Wix!


Bienvenido al

Únete al Blog de Wix ¡Para estar al tanto de novedades!

Hmmm, that's not a valid email address.

¡Suscríbete al Blog! \ 

Diseño web, tendencias, consejos para
emprendedores ¡y todas las novedades sobre Wix!

Hmmm, that's not a valid email address.