¿Qué es el parallax y cómo hacerlo? (+ ejemplos)


Con su aparición en internet allá en el año 2011, el efecto parallax (en español paralaje) marcó un antes y un después en el mundo del diseño web. Desde entonces, han surgido y desaparecido muchas modas en internet, pero el parallax parece haber llegado para quedarse como pieza fundamental del diseño web.


A la hora de crear una página web, el parallax es una excelente manera de añadir profundidad y movimiento al hacer scroll, es decir, el desplazamiento vertical en la página web. En este artículo hacemos un repaso detallado a este mágico efecto de pantalla con diez inspiradores ejemplos de páginas web y varias plantillas que te ayudarán a empezar:



¿Qué es el efecto parallax?


El parallax es una técnica de diseño web en la que el fondo se mueve a un ritmo distinto del contenido. El resultado es una ilusión en 3D cuando hacemos scroll, creando un efecto de profundidad que ayuda al usuario a sumergirse en el contenido.

El efecto parallax se basa en una ilusión óptica: el ojo humano percibe los objetos cercanos más grandes de los que están más lejos. Como resultado, nos da la sensación de que los objetos más distantes se mueven más lentamente que los que están más cerca.


La técnica de parallax se lleva usando mucho tiempo en distintos medios para conseguir un efecto realista. Su primer uso se remonta a la animación tradicional, nada menos que a la producción de Blancanieves y los siete enanitos de los Estudios Disney, pero también se ha empleado en videojuegos de culto como Super Mario. Con la llegada del CSS y el HTML, el parallax se ha convertido en una técnica inseparable del mundo del diseño web tal y como lo conocemos hoy.


Aquí tienes diez excelentes ejemplos de efecto parallax creados con Wix para inspirar tu diseño web:



Ejemplos de parallax.


01. Mild Design


Emilie De Grosbois es una artista visual de Montreal y la creadora de Mild Design. Su portafolio da la bienvenida a los visitantes con un impactante conjunto de imágenes que ocupan toda la pantalla. Gracias al uso del parallax, la transición de imágenes no solo fascina, sino que también agrega profundidad, como si las imágenes se deslizaran suavemente una sobre otra.




02. OFFF Tel Aviv


Visitar la página web del Festival OFFF 2019 es una toda una experiencia gracias a su fondo rosa, las grandes letras de su texto y el dinamismo que destila. Esta página también está llena de movimiento gracias a su combinación de animaciones y parallax. Al hacer scroll, se activan varios videos en loop con distintos conferencistas y actividades del festival así como el guiño de un montón de ojos que dan una nota de humor y despiertan las ganas de participar.




03. Chris Covert


La atractiva página web del CV online de Chris Covert, Ingeniero Aeroespacial, es tan profesional como innovadora. Su diseño e interactividad consiguen transmitir bastante de su personalidad que difícilmente habría logrado con una aburrida lista de experiencia, aptitudes y formación académica. Usando el efecto parallax, Chris distribuye fragmentos de su CV o de su tarjeta de visita a lo largo de la pantalla mientras el fondo cambia detrás de ellos y éstos permanecen inmóviles. El resultado es tan extraordinario como sorprendente.




04. Ivy Chen

El uso del parallax que hace la ilustradora y diseñadora Ivy Chen consigue crear un efecto único en su portafolio online. En él, sus trabajos se van desvelando progresivamente al hacer scroll como por arte de magia. Ivy nos invita a conocer sus distintos trabajos de una manera muy original: cada boceto de moda se va transformando lentamente en una prenda real para acabar convirtiéndose en una fotografía de moda en toda regla. El desplazamiento parallax logra en esta página un efecto hipnotizante que amplifica y explica su contenido.




05. Industrial Jewellery

La página web de la diseñadora de joyas Hila Rawet Karni usa el parallax para crear un interesante diseño compuesto de varias capas. Superponiendo imágenes y textos unos encima de otros y combinando imágenes de movimiento lento y rápido, la página parece cambiar y formar constantemente nuevas composiciones al hacer scroll. Fíjate, por ejemplo, en la foto de la mujer de negro que aparece en el centro. Permanece fija en la pantalla mientras van apareciendo a su lado otros elementos hasta que, finalmente, desaparece para dar paso a otras secciones.




06. Inky Blue Animal Rescue

Además de ser adorable, la página web de Inky Blue Animal Rescue puede sentirse orgullosa de tener una coherente paleta de colores compuesta de azules y neutros (que responde, naturalmente, al nombre de la ONG) y al buen uso del movimiento. En la mitad superior de la página, las grandes letras en mayúscula del nombre de la ONG cruzan horizontalmente toda la pantalla. A continuación, el efecto parallax nos descubre a dos mascotas peludas al hacer scroll. Si hacemos un desplazamiento vertical hasta el final de la página, se repite la misma animación como si de alguna forma cerrara un círculo iniciado al principio.




07. Karlie Kross

Esta página web de diseño elegante y limpio es un portafolio de modelos perfecto para la supermodelo Karlie Kloss. El diseño busca la simplicidad usando los colores blanco, gris y negro, y una generosa cantidad de espacio blanco. A su vez, combina su elegante estilo con pequeños toques para alejarse de una imagen ordinaria: sutiles detalles en rosa, una fuente negra de fuerte presencia y una sensación de movimiento usando el parallax y un video en loop.




08. Hana Knizova


La página web de fotografía de Hana Knizova se caracteriza por sus fondos que se mueven gracias al efecto parallax. Las fotografías de la página de inicio son una introducción a los proyectos de Hana y a sus distintas especialidades, desde la fotografía editorial hasta el retrato pasando por la fotografía de maternidad. A su vez, las imágenes se duplican como el menú de la página creando un particular sistema de navegación interno donde cada imagen conduce a una página diferente.




09. Hotel Vale das Nuvens


Vale das Nuvens es un ecohotel de Brasil cuya página web de hotel está compuesta por numerosos franjas horizontales con efecto parallax. Cada franja cuenta con un llamado a la acción diferente y una magnífica imagen o video de las instalaciones del hotel. El texto que aparece en el centro de cada franja se mueve a un ritmo diferente que el fondo consiguiendo un suave y agradable efecto a la vista.




10. Frankie Retford


La página personal de la diseñadora y nómada digital Frankie Ratford está llena de color, alegría y energía. La mitad superior de la página se caracteriza por tener varios fondos que se mueven en parallax y en la que Frankie aparece inmóvil retratada de forma tan encantadora como cercana. A espaldas de esta foto aparece su nombre deslizándose hacia arriba seguido de una breve biografía suya que repite el mismo patrón. El resto de la página web usa sutilmente el efecto parallax en otras secciones informativas.




Cómo usar el efecto parallax en tu sitio Wix


Para activar el efecto parallax en tu página web Wix usa franjas con imagen, color o un video de fondo. La combinación de varias franjas enriquecerá el efecto.





Cómo activar el desplazamiento parallax en una franja


  1. Entra en el Editor, haz clic en 'Agregar' en el menú izquierdo y luego en 'Franjas'.

  2. Haz clic en 'Cambiar el fondo de la franja'. Aquí podrás cambiar el fondo por el color, imagen o video que tú elijas.

  3. Haz clic en 'Configuraciones' sobre la franja y en 'Efectos de desplazamiento' elige el efecto que quieras (Parallax, Revelar, Zoom-in o Aparecer).

  4. Comprueba el funcionamiento del efecto en el modo Vista Preliminar y realiza los cambios si fuera necesario.


Plantillas con efecto parallax:

Otra opción es elegir una plantilla que incluya el efecto parallax en su diseño y adaptarla a tus necesidades. Hemos elegido tres plantillas de este tipo para que te inicies (aunque puedes elegir la que tú quieras en nuestra página de plantillas):


Panadería: esta estupenda plantilla está compuesta de varias franjas que ocupan toda la pantalla con desplazamiento parallax. El cinemagraph que aparece en la tercera franja añade mayor sensación de movimiento.



Let's Play: esta plantilla compuesta de varios fondos con efecto parallax consigue crear un sofisticado look mediante un fondo degradado que cambia de color y otro con un texto fijo e inmóvil.



Estilismo: en esta plantilla dedicada al estilismo de moda, al hacer scroll se activan diferentes efectos en la página y se aprecian dos velocidades durante el desplazamiento vertical.




Publicado por Equipo WIx





es03.png