Efecto parallax: qué es, ejemplos y cómo añadirlo en tu web

Recordamos el día en que apareció la campaña Spring Summer de Gucci. No era solo una presentación de sus nuevos diseños: era toda una experiencia que, amante del diseño o no, te envolvía en sus ilustraciones y movimientos.

No había espacio sin utilizar a lo largo de todo el sitio. Por fortuna, sigue disponible. 

¿Cómo es que habían logrado esos movimientos? Usaron un efecto que es cada vez más usado en diseño web: el efecto parallax.

Considera que el diseño web de tu marca es realmente importante e influye en la decisión de compra de los usuarios. Al menos un 48 % de las personas ha señalado que el diseño web es el factor número uno para decidir si confía o no en un producto o servicio. 

El efecto parallax es un principio en el mundo del diseño web que muchas empresas y marcas deciden ocupar para romper los esquemas tradicionales y atraer a sus consumidores. Añade profundidad y movimiento a la navegación de tu página conforme haces scroll. Y se basa en un método multiplano a partir de una one page web.

Los elementos se ordenan en varias capas que se mueven independientemente en sentido vertical u horizontal. Pueden ser controladas por el usuario al desplazarse por la web, o también pueden ofrecer una función de desplazamiento automático que evita hacerlo manualmente.

Aunque el efecto parallax parezca un principio del diseño web sumamente actual, sus raíces surgieron con la cámara multiplano. Este invento de Disney pretendía destacar sus animaciones perfeccionando el movimiento de la cámara, con el fin de crear un movimiento tridimensional. 

¿Cuándo te conviene usar el efecto parallax?

Este recurso estético puede ser utilizado para contar una historia, pues el efecto brinda una línea de tiempo y sumerge al usuario en una experiencia divertida, original e interactiva. Fusiona la belleza visual de los videojuegos y retoma los gráficos de los cómics.

Si deseas contar una historia atractiva para los usuarios que entran a tu sitio, el efecto parallax puede ayudarte a explotar al máximo tu creatividad y hacer de tu storytelling un elemento poderoso. Este efecto te brinda continuidad, que es justo la característica principal para hacerte presente en un contexto a través de un gráfico.

¿Cómo hacer el efecto parallax en tu web?

Es importante mencionar que el efecto parallax se logra a través de CSS (Cascading Style Sheets). Es por eso que tienes 2 opciones:

• Diseñar con este tipo de código HTML, lo cual implica un proceso donde necesitarás conocimientos avanzados en CSS, diseño web y Javascript.
• Emplear una plantilla.

El código CSS brinda un valor estético al desarrollo web y existen dos clases:

• Cover: redimensiona la imagen para que ocupe el máximo de pantalla posible.
• Contain: redimensiona la imagen para que se vea en su totalidad. 

Efecto parallax con CSS

1. Utiliza HTML5 de CSS3 para tu efecto parallax

Para generar el efecto de ligera profundidad necesitas HTML5 de CSS3. Esta herramienta te servirá para crear la ilusión óptica del efecto parallax. Sin embargo, si prefieres un proceso más simple puedes probar con diversas librerías de Javascript, que detectan la orientación de los dispositivos móviles a través del giroscopio y el acelerómetro, o con una página como parallax.js

2. Elementos para tu efecto parallax

Para el desarrollo del efecto parallax requieres los siguientes elementos: 

• Una imagen de grandes dimensiones o texturas.
• 3 archivos: index.html, estilos.css, parallax.js
• Jquery

3. Sigue estos pasos

Como toda creación con HTML el proceso es complejo. De acuerdo con un ejemplo de Javi Niguez, desarrollador web, el procedimiento es:

1. Crea el efecto de escalado con tres capas de etiquetas div.
2. Añade la imagen de fondo al cuerpo.
3. Posiciona cada una de las capas.
4. Añade texto.
5. Anima cada capa.

De igual forma, te compartimos un video tutorial en el que podrás ver los pasos en acción:

Video de Mejaalex

4. Usa extensiones especializadas para CSS 

Hay plugins para WordPress o si lo prefieres existen plantillas que vienen incluidas ya con este efecto, las cuales pueden resultar de mucha utilidad. A continuación, te compartimos algunos ejemplos. 

Efecto parallax creando un elemento contenedor y estableciendo la altura de la imagen

1. Crea un efecto de desplazamiento 

Para crear un efecto de desplazamiento de parallax scrolling inicia con: background-attachment: fixed. Puedes utilizar otras propiedades de fondo para fines de estilo adicionales, como centrar y escalar la imagen.

Aquí tienes un fragmento de código CSS básico para crear un efecto de paralaje:

.example { background-image: url("image.png");

* Set the height */ height: 400px;

/* Create a parallax effect */

background-attachment: fixed;

background-position: center;

background-repeat: no-repeat;

background-size: cover; }

2. Establece una altura máxima

Alternativamente, en lugar de determinar una altura específica en términos de píxeles, también puedes definir la altura al 100 % (que luego corresponde a la altura de la imagen).

Dentro de tu código HTML, el elemento contenedor utilizado es:

<div class="example"></div>

Puedes probar el código y jugar con el desplazamiento de paralaje CSS en Codepen. 

3. Hazlo responsive

Una vez que comiences a jugar con este código, te darás cuenta rápidamente de que el archivo background-attachment: fixed a menudo causará problemas con las versiones móviles de tu sitio web.

Hay una solución fácil para eso agregando un media query. 
 
@media only screen and (max-device-width: 1366px) {

  .example {

background-attachment: scroll;

  }

}

Crea un contenedor de página y una sección estática

1. Observa este código

Hay una forma alternativa para crear el efecto parallax: con un contenedor de página y una sección estática.

<main class="wrapper">

  <section class="img1">

    <h1>Parallax</h1>

  </section>

  <section class="static">

    <h1>Content</h1>

  </section>

  <section class="img2">

    <h1>Content 2</h1>

  </section>

</main>

El contenedor posee las propiedades de perspectiva y desplazamiento de toda la página, mientras que la sección estática es el fondo para mostrar el parallax.

Parallax agrega el pseudo-elemento ::after a la imagen de fondo, así como el elemento de transformación necesario para el efecto.

En este código, la sección se refiere al tamaño, la visualización y las propiedades del texto que generalmente no son relevantes para el parallax. Además, vale la pena señalar que img identifica la imagen de fondo para cada sección.

2. Incluye este código 

El código CSS necesario para lograr este efecto es un poco más extenso.

Esto es lo que debes incluir:

.wrapper {

  height: 100vh;

3. Escala las imágenes 

Agrega una barra de desplazamiento horizontal y tendrás que deshabilitar overflow-x para deshacerte de él.

overflow-x: hidden;

  /* Enable scrolling on the page. */

  overflow-y: auto;

4. Establece distancia simulada

Los siguientes 2px se refieren a la distancia simulada entre los objetos transformados y el punto de vista.

   perspective: 2px;

}

.section {

5. Establece el position: relative; 

Crea un posicionamiento absoluto entre elementos secundarios y principales.

position: relative;

6. Establece una altura específica para el contenedor, pero el valor es irrelevante

  height: 100vh;

  /* For text formatting. */

  display: flex;

  align-items: center;

  justify-content: center;

  color: blue;

  text-shadow: 0 0 5px #666;

}

.parallax::after {

7. Establece la posición

Aquí es donde determinas la posición y muestras los detalles del pseudoelemento.

  content: " ";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

8. Aleja el pseudoelemento 

A continuación, debes alejar el pseudoelemento del viewport y luego escalarlo nuevamente para volver a llenar el viewport back up.

transform: translateZ(-1px) scale(1.5);

El tamaño de fondo obliga a la imagen a ocupar todo el elemento.

  background-size: 100%;

El Z-index hace que los elementos sibling no hagan overlap.

   z-index: -1;

}

.static {

  background: lightblue;

}

9. Configura las imágenes de fondo

Por fin llegó el momento de que configures las imágenes de fondo como se ve en el siguiente código:

.img1::after {

  background-image: url('image1.jpg');

}

.img2::after {

  background-image: url('image2.jpg');

}

Cómo hacer el efecto de parallax scrolling en WordPress 

Puedes crear un efecto parallax en WordPress de varias formas. Por ejemplo, al cifrar una nueva sección de parallax en el código de tu sitio web; también podrías instalar un tema gratuito de parallax o instalar un plugin dedicado.  

Una de las mejores cosas de WordPress es que es altamente personalizable y flexible. Cada una de estas opciones te dará un resultado similar. 

Sin embargo, si deseas tener la máxima flexibilidad, te recomendamos que sigas la ruta de codificación HTML y CSS. Puedes ajustar tu código sin necesidad de cambiar a otro tema o instalar un plugin que pueda ralentizar tu sitio. 

1. En el editor de WP haz clic en Apariencia 

Antes de usar este método, asegúrate de sentirte cómodo editando archivos en WordPress. 

Entonces veamos: navega hasta el editor de temas (theme editor) y haz clic en Apariencia (Appearance > Theme Editor) en la barra lateral de administración. Llegarás a una página como esta: 

Fuente de imagen

2. Busca dónde quieres agregar la imagen

En archivos de tema (Theme Files) busca el archivo de la sección donde te gustaría agregar una imagen de fondo para parallax. ¿Quieres ubicarlo justo debajo del encabezado? ¿En el centro de una página? ¿Tal vez al final de la página? 

Todos los temas tienen archivos para las secciones de encabezado y pie de página, así como para cada plantilla de página. Afortunadamente, la mayoría de los creadores de temas nombran estos archivos de manera accesible. 

Si estás buscando la sección de encabezado, es probable que el archivo se llame «encabezado.php» o «Encabezado». Si estás buscando una plantilla de página determinada, es probable que se llame «Página única» o «Plantilla de página». 

3. Pega este código

Una vez que hayas encontrado el archivo correcto, copia y pega el siguiente código: 

 <div class="parallax"></div>

A continuación, carga tu imagen de fondo para parallax en tu biblioteca de medios de WP. Guarda la URL de la imagen para el siguiente paso. 

4. Copia el CSS

Por último, copia el CSS de parallax en el código de tu sitio web. Ve hacia personalizar apariencia (Appearance > Customize > Additional CSS). Pega el siguiente código: 

 .parallax {

  background-image: url("image.png");

  height: 400px;

  background-attachment: fixed;

  background-position: center;

  background-repeat: no-repeat;

  background-size: cover;

}

Asegúrate de reemplazar el archivo «image.png» con la URL de tu imagen de fondo. 

Dos opciones en caso de que no te guste la programación

Una opción es instalar un plugin como Advanced WordPress Backgrounds y Parallax Image.

Estos dos plugins agregan un efecto parallax a tu sitio después de añadir un código abreviado simple al contenido. Son compatibles con los principales creadores de páginas de WP, como WPBakery y Elementor.

La segunda opción es instalar una plantilla de parallax scrolling, que en realidad es una de las formas más fáciles y sencillas de agregar un efecto como este a tu sitio web de WordPress. 

Estos temas o plantillas vienen con la funcionalidad de parallax incorporada, lo que facilita añadir y eliminar el efecto de tu sitio web. A continuación, verás algunas opciones de plantillas con el efecto parallax para WP. 

Mejores plantillas con efecto parallax en WordPress

1. Red sky 

Precio: 44 USD

Este tema creado para WordPress utiliza el efecto parallax y es ideal para todo tipo de negocio. Esta plantilla te permite elegir entre cuatro diferentes diseños. Además, podrás escoger entre una ilimitada paleta de colores para crear una original one page web que responda a las necesidades de tu marca. 

También podrás seleccionar diversas opciones para diferentes tipos de publicaciones, donde puedes incluir galería, enlaces, video y audio. 

Descárgala en Theme Forest

2. 907 

Precio: 59 USD

La última actualización de esta plantilla está equipada con un plugin visual y alrededor de 12 demos listos para ser utilizados con solo hacer un clic. Es uno de los pocos temas de WordPress que ofrece la oportunidad de integrar videos mouseover dentro del portafolio.

Descárgala en Team Forest

3. Impreza

Precio: 59 USD

Este tema está enfocado en los detalles. Te podrá ayudar a encontrar la ubicación y el equilibrio perfecto de los elementos, pues su Head Builder te permite tener una herramienta sumamente flexible para crear las cabeceras que requieres. Las combinaciones de color y animaciones son excelentes. 

Descárgala en Team Forest

4. Phoenix

Precio: 44 USD

Este tema minimalista, elegante y vanguardista es ideal para llamar la atención del usuario de inmediato. Tiene una estética inigualable y te permite crear sitios profesionales de manera sencilla, gracias a su herramienta de arrastrar y soltar. 

Descárgalo en Team Forest

5. Telesis

Precio: 45 USD

Esta plantilla para WordPress es de estilo one page web. Es ideal para explotar tu creatividad y tiene un estilo limpio y ordenado para mostrar productos que son personalizados. Te permite realizar diseños frescos y modernos de manera muy accesible, con cabeceras tipo slideshow a pantalla completa. 

Descárgala en Viva Theme

6. Scalia

Precio: 59 USD

Es una plantilla multiusos muy eficaz que te permite realizar diseños de manera rápida. Cuenta con más de 150 demos listos para ser instalados, incluyendo one page web. Es de fácil instalación y totalmente personalizable, con barras laterales ilimitadas. 

Descárgala en Team Forest

1. Galápagos: Ecuador ama la vida

El sitio oficial de las Islas Galápagos muestra ilustraciones llenas de color. Cuenta con una ilusión óptica que brinda un efecto 3D. Como podrás notar, cada vez que das scroll el texto toma movimiento y te da la sensación de vivir un recorrido por escenarios diferentes. El uso del efecto parallax en esta página es de tipo horizontal.

Imagen de Visit Ecuador Travel

2. Michael David Winery

¿Estás listo para entrar en un sitio mágico lleno de colores y movimientos? Sin duda, Michael David Winery te brinda una experiencia única al visitar su página. Puedes pasar horas y horas en ella sin aburrirte, pues muestra hermosas ilustraciones antiguas que te permiten hacer un recorrido maravilloso. 

Hay acercamientos a su producto y demuestra el amor al detalle. La exquisitez de este sitio web con efecto parallax no te deja más que pensado en lo delicioso que debe ser su producto. Las fotografías de calidad sobresaliente te hacen disfrutar del brillo del cristal de cada botella. Y tiene una elección de colores tan complementados que en ningún momento te sientes abrumado. 

Imagen de Michael David Winery

3. Pressels

Esta página web usa el efecto parallax scrolling para contar una historia personal de la marca y exaltar los beneficios de su producto. Si bien la ilusión óptica 3D no se utiliza (solo es un fondo negro), sus imágenes de calidad y animaciones le dan el movimiento suficiente para ser atractiva y divertida. 

Algo interesante es que la marca no hace uso de muchas secciones en su página principal. Gracias al storytelling tienes la información suficiente del producto en tan solo 4 bloques. 

Imagen de Pressels

4. Dogstudio 

Este sitio web presenta características peculiares. A diferencia de otras páginas, hace uso de mucho más texto y solo se concentra en su imagen 3D del fondo. Este detalle la hace realmente original, ya que a través de una línea de tiempo te brinda una breve explicación de su trabajo más sobresaliente; mientras tanto, el increíble perro se mueve y cambia de color. 

Imagen de Dogstudio

5. Brand Studio

¡Bienvenido a un mundo raro! Te recomendamos que antes de visitarlo te asegures de tener una buena conexión de internet para que lo disfrutes al máximo. Si bien este sitio puede parecer un poco confuso, con tal de vivir su experiencia querrás pasar tiempo averiguando el contenido de cada ilustración. 

En esta página se hace uso de pocos colores: los protagonistas son el negro y blanco. Estamos seguros de que este sitio te encantará si eres fanático de los collages. Si quieres hacer algo muy diferente puedes tomar a Brand Studio como referente para mostrar tus servicios de forma única e innovadora. 

Imagen de Brand Studio

6. Defeat BOCO

El equipo creativo de Defeat BOCO te lleva en un viaje con un diseño de parallax horizontal que también incorpora un tobogán vertical para transitar por debajo de la superficie.

Imagen de Defeat BOCO

7. Stock Dutch Design

Stock Dutch Design, un estudio de diseño, utiliza elementos de parallax inteligentes para llamar la atención sobre la tipografía de su sitio web. Cada letra tiene una foto que se mueve sutilmente cuando te desplazas. 

Imagen de Stock Dutch Design 

8. Delassus Group

El productor de alimentos Delassus Group utiliza un efecto de parallax scrolling para resaltar una de sus ofertas: los tomates. 

Imagen de Delassus Group 

9. Beer Camp

También se puede crear un poderoso efecto de zoom con parallax. Esto es exactamente lo que Beer Camp decidió hacer para ayudar a los usuarios a centrarse en los elementos más importantes de su sitio web.

Imagen de Beer Camp

10. PORSCHEvolution

Con una larga y rica historia en la industria del automóvil, el equipo de diseño del sitio web de PORSCHEvolution utilizó el efecto parallax para mostrar una variedad de modelos que han salido de las instalaciones del fabricante, así como una línea del tiempo de muy buen gusto.

Imagen de PORSCHEvolution

11. ToyFight 

El sitio web de la galardonada agencia creativa ToyFight es sutilmente interactivo gracias a las funciones de parallax. El efecto 3D resultante es poderoso y ciertamente aumenta el engagement.

Imagen de ToyFight

12. Work.Studio

Work.Studio utiliza un efecto muy sutil para llevarnos del encabezado al cuerpo de su página de inicio. El texto no se desplaza con la página, sino que permanece en su posición a medida que el usuario se desplaza hacia arriba.

Imagen de Work.Studio

13. Garden Estudio

El sitio web de Garden Estudio es notable no por su factor «sorpresa», sino porque demuestra cómo una función parallax simple y directa puede mejorar el diseño de un sitio web.

Imagen de Garden Estudio 

14. Dave Gamache 

La mezcla de animación de Dave Gamache con el uso sutil del parallax crea un efecto fascinante sobre un fondo de escala de grises.

Imagen de Dave Gamache

¿Estás listo para transformar por completo tu sitio web? Ahora que ya tienes mayor conocimiento acerca de lo que necesitas para crear un efecto parallax puedes comenzar a experimentar con diferentes estilos, paletas de colores, movimientos, elementos y desplazamientos. Recuerda hacer tantas pruebas como te sea posible para que tus visitantes tengan la mejor experiencia. 

Si bien el efecto parallax hará todo el trabajo para retenerlos, es importante que garantices que la experiencia de usuario será impecable. De lo contrario, toda la creatividad y esfuerzo implicados simplemente no valdrán la pena. No olvides que este tipo de efecto es ideal para el storytelling. Por ello, tómate el tiempo para desarrollar una historia increíble acerca de tu producto o servicio.