En el post de hoy te hablaremos del diseño web parallax, de lo que es el efecto parallax y como conseguirlo.

El diseño web Parallax está a la orden del día. Seguro que alguna vez te has encontrado con este efecto en el momento en el que has entrado en una página, aunque puede que no te sepas el nombre.

Haciendo scroll

Lo que ocurre es que, cuando hacemos scroll(bajar con la ruletilla del ratón), descubrimos que el fondo de la página parece moverse a una velocidad diferente a la que se mueve el contenido. Se crea un efecto de profundidad y a la vez desvela aquel contenido que no era visible al principio.

Se utiliza para darle vistosidad y dinamismo a una web. A diferencia del Flash, el Parallax no requiere de complementos adicionales ni consume muchos recursos de una web. Sorprende al usuario y fomenta la verticalidaden dispositivos móviles.

Un poco de historia

Antes de meternos en el diseño web Parallax conviene estudiarlo un poco. Lo cierto es que no es un recurso que se haya inventado en estos últimos años ni mucho menos; se inventó nada menos que por Disney para dotar a sus creaciones de una cierta tridimensionalidad. Recibió el nombre de cámara multiplanoy no tardaría en utilizarse en el ámbito de la creación de videojuegos, aunque aquí se denominó Moon Patrol.

¿Qué hace falta para hacer el efecto Parallax?

Es un efecto bastante sencillo de lograr, pero hacen falta algunos conocimientos avanzados de diseño web (es posible que nos toque contratar a un diseñador para que se encargue del mismo).

Un poco de los lenguajes de la web …

Tan sólo necesitaremos algo de HTML5 en combinación con CSS3. Lo más común es que también necesites descargarte librerías de JQueryy trastear un poco con Javascript.

Necesitas dos imágenes: una para el fondo y otra para colocar en el frontal de la web.

Hay algunas librerías que han sido diseñadas para que no nos tengamos que complicar mucho la vida: simplemente se tienen que adaptar a la página en cuestión y ya tendremos el diseño web parallax listo para funcionar.

Ventajas de aplicar el efecto Parallax

Storytelling

La mayoría de los webmasters se deciden por el efecto de diseño web parallax con el objetivo de sorprender a sus visitantes. Sin embargo, tan sólo resultará sorprendente al principio; a la larga puede llegar a cansar.

Por ello, tenemos que encontrar la forma de que también cuente una historia.

Una buena idea es utilizar el efecto parallax para páginas que tienen algo que contar, como puede ser un tutorial. En las mismas podemos aprovechar el efecto de profundidad y linealidad para hacer que el usuario tenga una experiencia sorprendente y divertida.

Variedad de métodos

Hay muchas maneras de crear el efecto Parallax (Raster, Capas método, manipulación del patrón, Sprite), para que así sea más fácil de cara al webmaster poder adaptarlo a su web en cuestión.

Algunos métodos son más complejos que otros, por lo que requerirán de un mayor nivel de conocimiento.

Usabilidad

Las páginas que se diseñan bajo el efecto parallaxtienen más elementos que las webs convencionales y es que suelen englobar todas las secciones dentro de la misma página. Esto puede afectar a la velocidad de la web, incrementándola.

Por fortuna, hay maneras de solucionarlo; por ejemplo, se puede crear una primera página que muestre una parte del contenido y así, mientras hacemos scroll, se descarga el resto.

Aumenta la curiosidad

Los usuarios entran en la web y se preguntan qué van a encontrar a continuación. Conseguimos trabajar el elemento sorpresaal principio, incentivamos a que el usuario se quede gracias a los gráficos y animaciones, pero es conveniente buscar una forma de que, una vez que se haya desvanecido esta curiosidad, el visitante tenga razones para quedarse.

Alarga el tiempo de visitas

El método de desplazamiento de Parallax hace que el visitante quiera estar más tiempo recorriendo la web, lo que reducirá el efecto rebotey nos puede ayudar hasta a escalar posiciones en Google.

Además, al estar más tiempo en la web será más sencillo que se produzca la conversión deseada.

Si quieres que tu web siga lo último de lo último en tendencias, no dudes en probar con el efecto Parallax.

Reader Interactions

Deja un comentario

Tu dirección de correo electrónico no será publicada.

About David Moya

Apasionado de la Seguridad Informática, aprendiendo en todo momento y profundizando en el mundo web y en el posicionamiento en buscadores.

Share This