10 fantásticos sitios web con efecto parallax

10 fantásticos sitios web con efecto parallax

Estos sitios muestran al mundo cómo se debe hacer esta técnica.

Una tendencia de diseño web que se niega a desaparecer es el efecto parallax. Con esto, el diseño del sitio web se configura con la imagen de un fondo de la página web que se va moviendo a un ritmo más lento que las imágenes en primer plano, creando un efecto 3D a medida que el usuario hace scroll. A veces puede ser abrumador, pero cuando se usa con moderación puede proporcionar un elemento agradable, con profundidad sutil que da como resultado un sitio web distintivo y memorable.

Pero para mostrar cómo debería hacerse, hemos recopilado sitios que emplean la técnica con buenos resultados. En algunos casos, el efecto parallax es la estrella del espectáculo; en otros simplemente agrega un toque de profundidad que hace que el primer plano parezca surgir un poco.

1. Bear Grylls

La agencia digital Outpost se encargó de crear una nueva estrategia digital para el explorador y presentador de televisión Bear Grylls que ha hecho programas como El último superviviente. El efecto parallax fue empleado «para estar a la altura de la nueva visión y valores de la marca, y representar la ‘marca de aventura‘ que necesitábamos para llevar a la gente a un viaje online», afirman fuentes del estudio. Una experiencia de usuario rica y dinámica fue  la clave.

El efecto parallax sutil se utiliza en todo, pero donde este efecto está muy bien explotado es la página de inicio. Grylls aparece en un dramático paisaje de la sierra, y el espectador se adentra en la escena mientras se desplaza. Es una gran introducción para seguir sus aventuras.

2. ToyFight

ToyFight es una agencia creativa galardonada, y su sitio web es muy divertido. Los fundadores Jonny Lander y Leigh Whipday se han convertido en figuras en 3D, que aparecen en una variedad de escenas en todo el sitio (incluida esta descarada referencia de Sagmeister y Walsh). El uso inteligente del efecto parallax amplifica el efecto 3D, y se combina con fondos claros, brillantes y audaces, nunca se vuelve abrumador ni irritante.

3. Hello Monday

Hello Monday es una agencia de diseño con sede en Dinamarca. Su objetivo es crear experiencias digitales inmersivas que cuenten una historia y den alegría a sus usuarios, y ha ido un paso más allá con el portafolio de su página web. Al crear un sitio de estudio, la dificultad es que la adopción de ideas de diseño innovadoras o de vanguardia a menudo significa sacrificar la claridad y la facilidad de uso, lo cual es primordial para un portafolio de diseño.

Hello Monday se las arregla para lograr ambos objetivos mediante la introducción de un efecto parallax sutil dentro de un diseño de página reducido. Cada hero image (imagen destacada de cada proyecto) se mueve ligeramente, para darle vida y agregar energía al diseño sin restar valor a la información mostrada. El efecto se usa solo en la página de inicio del estudio, con páginas individuales de proyecto mantenidas estáticas para permitir que el trabajo brille.

4. A-dam

A-dam diseña calzoncillos y boxer originales para hombres con personalidad, usando algodón orgánico certificado GOTS. Los boxers son hechos a mano por personas con salarios justos y horas normales de trabajo. Son una alternativa ética y elegante a tus prendas de supermercado habituales, y su sitio, creado por Build en Amsterdam , los muestra muy bien, con efectos parallax variados que aparecen en todas las direcciones a medida que te desplazas.

5. Diesel: BAD Guide

84.Paris creó este impresionante sitio web con efecto parallax (y una campaña de redes sociales asociada) para acompañar el lanzamiento de la fragancia BAD de Diesel. El sitio web es una única página que presenta una serie de reglas que conforman la ‘Guía BAD’.

El usuario puede explorar arrastrando el ratón en cada rincón de la página donde encontrará un efecto parallax. La página se presenta como un tablero de imágenes para hacer clic.

6. Myriad

El sitio de Bareface para Myriad muestra las infinitas posibilidades del sistema de muebles

Myriad es una gama de muebles modulares de oficina diseñada por Boss Design que está creada para ser flexible y reconfigurable, lo que le permite construir sus propios espacios de trabajo como mejor le parezca. Como parte de su trabajo en el lanzamiento, la agencia Bareface creó un sitio que muestra las infinitas posibilidades de Myriad con el uso inteligente del efecto parallax, tirando de inspiradores arreglos de muebles a medida que exploras el sitio.

7. Firewatch

Uno de los ejemplos más bellos de efecto parallax que hemos visto es este sitio web para el juego Firewatch, que utiliza seis capas móviles para crear una sensación de profundidad. Es genial porque no hay secuestro de desplazamiento (algo que a menudo acompaña al efecto de paralaje), y solo se usa en la parte superior de la página; el resto del sitio aún está para que pueda leer la información sin marearse.

8. Garden Studio

En una línea similar, Garden Studio también ha optado por utilizar la técnica del parallax de una manera sensata y agradable en la parte superior de su sitio, antes de pasar a una página principalmente estática. El paisaje cambiante es sutil y discreto, pero también la estrella del espectáculo: nos encontramos subiendo y bajando una y otra vez.

9. GitHub 404

Esto no es estrictamente un parallax scrolling, ya que el efecto se produce en el movimiento del mouse en lugar de con el scroll, pero es una página realmente divertida que usa capas para agregar profundidad. A diferencia de la otras, el fondo se mueve más rápido que el primer plano, creando una sensación de desorientación y de otro mundo.

10. Jess&Russ

No es de extrañar que página web de la boda de Russ Maschmeyer y Jessica Hische sea una belleza para la vista. El sitio traza su historia romántica, con el efecto parallax scrolling utilizado en todas partes para agregar profundidad a las ilustraciones. Se casaron en 2012, pero aún vale la pena ver el sitio web.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Whatsaspp