18 impresionantes sitios web con desplazamiento Parallax

Estos sitios se muestran en el mundo cómo se debe hacer el desplazamiento de paralaje.

Parallax scrolling es una tendencia de diseño web que se niega a desaparecer. El desplazamiento de paralaje es cuando el diseño del sitio web ve el fondo de la página web se mueve a un ritmo más lento hacia el primer plano, creando un efecto 3D a medida que se desplaza. Utilizado con moderación, puede proporcionar un elemento de profundidad agradable y sutil que da como resultado un sitio web distintivo y memorable.

Para ver cómo se debe hacer, haga clic aquí. En algunos casos, el desplazamiento del paralaje es la estrella del espectáculo; en otros, simplemente agrega un toque de profundidad que hace que el primer plano parezca sobresalir un poco. Y si te apetece realmente mejorar el barco, estos son ejemplos de animación. CSS es otra manera excelente de hacer tu sitio web. Ahora, echemos un vistazo a algunos sitios que utilizan el desplazamiento del paralaje en la forma correcta.

01. Davide Perozzi

Parallax, Desplazamiento de paralaje: Davide Perozzi

El sitio está principalmente basado en texto de Perozzi está lleno de vida [Imagen: Davide Perozzi]

El desplazamiento de paralaje es solo el comienzo de las delicias de la web que se encuentran en el hogar en línea de Davide Perozzi , un desarrollador creativo de Alemania. Su sitio de una sola página, en gran parte basado en texto, está lleno de sorpresas, como un desplazamiento suave, una copia defectuosa que cambia a medida que se mueve y proyecta imágenes que se deforman a la vista al mover el cursor animado sobre el título de cada proyecto. El aspecto es decididamente brutalista y una excelente demostración de las habilidades web de Perozzi.

02. Dogstudio

Parallax, Desplazamiento de paralaje: DogStudio

El animado doggo 3D es la estrella del espectáculo aquí [Imagen: Dogstudio]

La atracción focal inmediata del sitio de Dogstudio es un hermoso perro animado en 3D, ¿o es un lobo? – en el centro de la página, que escala y gira a medida que se desplaza por la página de paralaje. Su iluminación cambia de color a medida que se desplaza sobre los títulos de los proyectos recientes de Dogstudio, y quizás nuestra parte favorita sea cuando gira frente a parte de la copia de la página, ocultando parte del texto.

03. Bear Grylls

Parallax, Desplazamiento de paralaje: Bear Grylls

Esta es una excelente manera de atraer al espectador a la escena [Imagen: Bear Grylls]

La agencia digital Outpost se encargó de crear una nueva estrategia digital para el explorador y personaje de televisión Bear Grylls . «Para estar a la altura de la nueva visión y valores de la marca y encarnar la» marca de aventuras «, necesitábamos llevar a las personas a un viaje en línea», dice el estudio en su estudio de caso. Una experiencia de usuario rica y dinámica fue clave.

La paralaje sutil se usa en todo, pero el verdadero ladrón de escenas es la página de inicio. Grylls aparece en un paisaje montañoso dramático, y el espectador es atraído a la escena mientras se desplaza. Es una gran introducción a las aventuras a seguir.

04. ToyFight

Parallax, Desplazamiento de paralaje: ToyFight

Tanto Jonny como Leigh son anatómicamente correctos [Imagen: ToyFight]

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

05. hola lunes

Parallax, Desplazamiento de paralaje: Hola lunes

Hello Monday usa paralaje para inyectar un poco de emoción a su página de inicio [Imagen: Hello Monday]

Hola lunes es una agencia de diseño con sede en Dinamarca. Su objetivo es crear experiencias digitales inmersivas que cuenten una historia y brinden alegría a sus usuarios, y que haya ido más allá con su sitio de cartera. Al crear un sitio de estudio, la dificultad radica en las ideas de diseño innovadoras o de vanguardia a menudo implica sacrificar la claridad y la facilidad de uso, lo que es primordial para una cartera de diseño.

Hola lunes Lograr lograr tanto la introducción como el efecto de paralaje dentro de un diseño de página reducido. Cada imagen del héroe del proyecto se mueve ligeramente, para darle vida y agregar energía al diseño sin restar valor a la información que se muestra. El efecto se usa solo en la página de inicio del estudio, con páginas de proyectos individuales.

06. A-Dam

La captura de pantalla del sitio web de A-dam muestra a hombres en ropa interior

A-dam usa paralaje para mostrar su elegante ropa interior [Imagen: A-dam]

A-dam diseña calzoncillos y pantalones cortos de boxeador originales para hombres con carácter, utilizando algodón orgánico certificado por GOTS. Los boxeadores son hechos a mano por personas con salarios justos y horas de trabajo normales. Son una alternativa ética y elegante a sus pantalones de supermercado habituales, y su sitio, creado por Build in Amsterdam , los muestra muy bien, con una variedad de elementos de paralaje que aparecen desde todas las direcciones a medida que se desplaza.

07. Diesel: BAD Guide

desplazamiento de paralaje: Guía BAD de Diesel

La guía BAD de Diesel funciona como un tablero de anuncios virtual [Imagen: Diesel]

84.Paris creó este impresionante sitio web de paralaje (y la campaña de redes sociales asociadas) para acompañar el lanzamiento de la fragancia BAD de Diesel. El sitio de una página presenta la serie de reglas que conforman la » Guía MALA «.

El usuario puede explorar arrastrando el mouse alrededor de la página de paralaje, que se presenta como un tablero de imágenes para hacer clic. Hay consejos sobre todo, desde Tinder (‘Deslice a la derecha, a la derecha, a la derecha, a la derecha, clasifique más adelante’) a Instagram (‘No se olvide de ponerse en contacto con el jueves #TBT ‘), acompañado de ilustraciones monocromáticas.

08. Firewatch

La captura de pantalla del sitio web de Firewatch muestra una ilustración de un excursionista que mira sobre un cañón dorado al amanecer

Cada capa de árboles se mueve independientemente [Imagen: Campo Santo]

Uno de los ejemplos más hermoso desplazamiento de paralaje que hemos visto en este sitio web para el juego Firewatch , que utiliza seis capas en movimiento para crear una sensación de profundidad. Es genial porque no hay un secuestro de desplazamiento y solo se usa en la parte superior de la página; El resto del sitio sigue siendo así, puedes leer la información sin embargo. Si desea ver cómo se hace, aquí hay una buena demostración en CodePen .

09. Estudio de jardín

Desplazamiento de paralaje: la captura de pantalla del sitio del jardín muestra una ilustración de un banco debajo de árboles de hojas rojas con vistas a un lago

Las capas del paisaje hacen que parezca tridimensional [Imagen: Estudio de jardín]

De manera similar, Garden Studio también optó por usar la técnica de paralaje de manera sensible y encantadora en la parte superior de su sitio, antes de pasar a una página mayormente estática. El paisaje cambiante es sutil y discreto, pero también es la estrella del espectáculo: nos encontramos subiendo y bajando una y otra vez.

10. GitHub 404

Parallax scrolling: captura de pantalla de la página 404 de GitHub muestra una caricatura de tipo Jedi que dice: 'Esta no es la página web que buscabas'

El GitHub 404 rompe las reglas de paralaje para un efecto desorientador [Imagen: GitHub]

La página 404 de GitHub no es estrictamente un desplazamiento de paralaje, ni el efecto que ocurre en el movimiento del mouse en el lugar del desplazamiento, sino que es una página muy divertida que usa las capas para agregar profundidad. A diferencia del paralaje «apropiado», el fondo se mueve más rápido que el primer plano, creando una sensación de desorientadora y de otro mundo.

11. Jess y Russ

Desplazamiento de paralaje: la captura de pantalla muestra una ilustración de una mujer en un vestido blanco que es llevada por un veloz sobre el horizonte de la ciudad por la noche

Cada ilustración tiene una sensación de profundidad [Imagen: Jess y Russ]

No es de extrañar que la pareja de poder diseño Russ Maschmeyer y de Jessica Hische web de bodas es una belleza para la vista. El sitio muestra su historia romántica, con el desplazamiento de paralaje utilizado a lo largo para agregar profundidad a las ilustraciones. Se casaron en 2012, pero el sitio web todavía merece la pena.

12. Haz que tu dinero sea importante

Ejemplo de sitios web de desplazamiento de paralaje: Haga que su dinero sea importante

Administre sus finanzas con información y consejos de Haga que su dinero sea importante [Imagen: Public Service Credit Union]

Finanzas y dinero no son los temas más interesantes. Sin embargo, Firstborn, laagencia digital con sede en Nueva York, está optimizada con este dinámico sitio de desplazamiento de paralaje Haga que su dinero sea importante para la unión de crédito de servicio público.

Con el objetivo de enseñar al público los beneficios de unirse a una cooperativa de crédito, en lugar de usar un banco, este sitio brillante incluye todo, desde cómo funciona una cooperativa de crédito, dónde encontrar una y cómo solicitarla, así como una calculadora que muestra solo Cuánto se benefician los bancos de los depósitos de los clientes.

13. Madwell

desplazamiento de paralaje: Madwell

La agencia de Nueva York Madwell utiliza el desplazamiento de paralaje para agregar una sensación de profundidad [Imagen: Madwell]

La agencia de diseño y desarrollo Madwell , con sede en Nueva York, muestra su cartera con una gama de efectos de desplazamiento de paralaje para crear un estilo 3D notable que agrega una gran cantidad de profundidad.

14. Peugeot Hybrid4

desplazamiento de paralaje: Madwel

Peugeot utiliza el desplazamiento de paralaje para crear un cómic web de reproducción automática [Imagen: Peugeot]

Peugeot has hecho todo lo posible con el uso de desplazamiento de paralaje para crear un cómic de reproducción automática en el navegador. El cómic se reproduce en una medida que se desplaza por la página (y utiliza su función de reproducción automática que se desplaza automáticamente) y ayuda a anunciar la nueva tecnología HYbrid4 del fabricante de automóviles.

15. Soluciones culturales

desplazamiento de paralaje: soluciones culturales

Los círculos se mueven a diferentes velocidades para obtener un efecto 3D [Imagen: Soluciones culturales]

La consultora de arte Soluciones culturales emplea un sutil efecto de desplazamiento del paralaje para profundizar en su página de inicio. Su imagen de la marca principal es el uso de los círculos: los círculos en el fondo se mueven más lentamente que el primer plano, creando un efecto 3D.

16. Walking Dead

Sitios de desplazamiento de paralaje: Walking Dead

Walking Dead utiliza el desplazamiento del paralaje para empujar a su mundo sangriento [Imagen: CableTV]

Somos grandes fanáticos del drama zombie de televisión. The Walking Dead en Creative Bloq, y este sitio web nos atrapó para promocionarlo. El sitio imaginativo se remonta a los orígenes de las tiras cómicas del programa y tiene un uso inteligente del desplazamiento del paralaje para llevarlo a un mundo enfermo y depravado.

«Llegamos a esto como fanáticos del espectáculo, en primer lugar», dice el diseñador líder Gavin Beck. «Con esta unidad, queríamos crear un mundo dentro de Walking Dead».

«Para lograr esto, observe varias tecnologías y técnicas como HTML5, CSS3, JavaScript / jQuery, Web Audio / HTML5 Audio y el desplazamiento del paralaje. todas las plataformas «.

17. New York Times: Tomate Can Blues

Ejemplos de sitios web de desplazamiento de paralaje: New York Times

La nueva experiencia con este artículo del New York Times se desplaza sobre el paralaje [Imagen:]

En la era actual de la falta de atención y los medios de comunicación de tamaño reducido, ¿Cómo atraen las personas al periodismo de larga duración? Tomate Can Blues es una excelente respuesta a este problema del New York Times, que combina algunas técnicas inteligentes de diseño web con ejemplos e ilustraciones inspiradas en los cómics creados por Atilla Futaki.

Uno de los mejores ejemplos de desplazamiento de paralaje que hemos visto, el artículo que lleva a través de la historia de un luchador de jaula escrito por Mary Pilon. Una medida que se desplaza por el contenido, las ilustraciones cobran vida con animaciones y alteraciones inteligentes, que le permite sumergirse completamente en el contenido.

Las ilustraciones de Futaki se basaron en registros policiales, testimonios de testigos, fotografías y notas del informe, y la atención al detalle. En resumen, es una gran experiencia de lectura. ¿Es este el futuro del periodismo en línea?

18. caída de nieve

Ejemplo de sitios web de desplazamiento de paralaje: Snow Fall

El artículo » Snow Fall ‘de The New York Times inició una nueva moda para los sitios ricos de paralaje [Imagen: New York Times]

Como uno de los Primeros este sitios Que Realmente Amplio Los Límites desde el lugar de Podria Hacer Con El contenido editorial de formato largo en linea, el articulo nieve de la caída del New York Times Combina Una Variedad de Elementos Diferentes, incluido el Desplazamiento de paralaje y el vídeo en la web .

El artículo, sobre el horror de una avalancha en Tunnel Creek, se publica en línea en diciembre de 2012, pero sigue siendo un ejemplo sólido de lo que se puede hacer con el desplazamiento del paralaje. El periódico presentó el artículo ganador del Pulidor de una manera innovadora que atrae la atención de la comunidad de diseño en todo el mundo.