Recuerdo la primera vez que me encontré con la campaña Spring Summer de Gucci. Por azares del destino llegué a ella y al entrar no pude evitar verla detalladamente, y es que 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. Ninguna parte se salvaba de estar cubierta por colores, texturas y elementos interactuando entre un bloque y otro. Pero ¿para qué seguir con una descripción que no le hace justicia? Aquí podrás disfrutarla (por fortuna sigue disponible). 

<< Descarga gratis la guía para rediseñar tu sitio web >> 

Tras admirarla por un largo rato quise saber más acerca de su creación. ¿Cómo es que habían logrado esos movimientos?, ¿era algo sencillo de hacer? Y si bien ya había visto unas cuantas páginas con efectos 3D y que emanaban una sensación de profundidad no había prestado tanta atención en su desarrollo. 

Fue en ese momento cuando investigué más acerca del efecto parallax, que hoy en día es una técnica muy popular y que cada vez más marcas utilizan para sus diseños web. No pude evitar buscar más ejemplos y me sorprendí con el nivel de creatividad que una compañía puede darle su sitio. 

¡Y cómo no hacerlo! El diseño web de tu marca es realmente importante e influye en la decisión de compra de los usuarios. Al menos en 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. Esto es un estímulo para no dejar de innovar. 

Si quieres crear o darle un giro completo a tu diseño web hazlo con el efecto parallax. En este artículo te explicamos todo lo que necesitas saber y te compartimos unos cuantos ejemplos para que te inspires más. 

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 generar un impacto en 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 partiendo 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. 

Esta tendencia es cada vez más utilizada y resulta muy útil para darle dinamismo a un diseño web. Y si bien los diseños planos son los más usados entre las marcas, si buscas sorprender a tu usuario y mostrarle tus capacidades hazlo con características tridimensionales que lo mantengan navegando por mucho más tiempo.  

¿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, lo que es justo la característica principal para presentarte en un contexto a través de un gráfico.

Ahora sí, veamos cómo crear este peculiar efecto para el diseño web de tu negocio. 

¿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 como opciones:

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

Aquí te explicaremos cómo comenzar con la primera opción y más adelante te compartiremos nuestra selección de plantillas para uno de los gestores de sitios web más populares: WordPress.

Efecto parallax con CSS

Partamos por lo básico, ¿para qué sirve el código CSS?

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. 

Para generar el efecto de ligera profundidad necesitas de 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, con una página como parallax.js

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

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.

Consulta su post especializado si deseas profundizar en este ejemplo.

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

Video de Mejaalex

Puedes usar extensiones especializadas para CSS (aquí encontrarás 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. 

Las 7 mejores plantillas con efecto parallax en WordPress

1. Red sky 

Precio: $ 44

Este tema diseñado 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. 

Plantilla Red Sky con efecto Parallax para WordPress

Imagen de Envato Market

2. 907 

Precio: $ 59

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.

Plantilla 907 con efecto Parallax para WordPress

Imagen de Envato Market

3. Impreza 

Precio: $ 59

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. 

Plantilla Impreza con efecto Parallax para WordPress

Imagen de Envato Market

4. Phoenix

Precio: $ 44

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. 

Plantilla Phoenix con efecto Parallax para WordPress

Imagen de Envato Market

5. Telesis

Precio: $ 45

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 crear diseños frescos y modernos de manera muy accesible con cabeceras tipo slideshow a pantalla completa. 

Plantilla Telesis con efecto Parallax para WordPress

Imagen de Viva Theme

6. Patti

Precio: $ 44

Esta elegante plantilla para WordPress viene integrada con un builder que te permite crear una one page web orientada al usuario y su diseño. Es sumamente versátil para adaptarlo a cualquier tipo de proyecto y sus colores neutros ayudan a concentrar la atención en las grandes imágenes que tengas que compartir de tus servicios o productos. 

Plantilla Patti con efecto Parallax para WordPress

Imagen de Envato Market

7. Scalia

Precio: $ 59

Es una plantilla multiusos muy eficaz que te permite crear 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. 

Plantilla Scalia con efecto Parallax para WordPress

Imagen de Envato Market

5 ejemplos de parallax scrolling

Ahora ve en acción sitios web reales que hacen uso de este efecto parallax. Tómate tu tiempo para entrar al sitio, analizarlo y ver el increíble resultado que le brinda a las marcas. 

1. Galápagos: Ecuador ama la vida

El sitio oficial de las Islas Galápagos muestra ilustraciones llenas de colores. 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. 

Ejemplo de efecto parallax en el sitio web turístico de Galápagos

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 goza de hermosas ilustraciones antiguas que te permiten hacer un recorrido maravilloso. 

Hay acercamientos a su producto y muestra 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. 

Ejemplo de efecto de paralaje en el sitio de Michael David Winery

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. 

Ejemplo de efecto de paralaje en el sitio de Pressels

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. 

Ejemplo de parallax scrolling en el sitio de Dogstudio

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 hacen 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. 

Ejemplo de parallax scrolling en el sitio de Brand Studio

Imagen de Brand Studio

¡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, 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. 

Rediseño Web

 Rediseño web

Publicado originalmente en julio 2 2020, actualizado julio 02 2020

Topics:

Diseño Web