14 impresionantes sitios web de desplazamiento de paralaje
El desplazamiento de paralaje «ha existido por un tiempo, pero es una de esas tendencias de diseño web que continúa. El desplazamiento de paralaje es cuando el diseño del sitio web ve el fondo de la página web moviéndose a un ritmo más lento hacia el primer plano, creando un efecto 3D a medida que se desplaza. Si se usa con moderación, puede proporcionar un elemento de profundidad agradable y sutil que da como resultado un sitio web distintivo y memorable.
Para mostrar cómo se debe hacer, aquí hay algunos sitios que emplean la técnica con un efecto brillante. En algunos casos, el desplazamiento de paralaje es la estrella del espectáculo; en otros, simplemente agrega un toque de profundidad que hace que el primer plano parezca resaltar un poco.
Si realmente le apetece empujar el barco, estos impresionantes ejemplos de animación CSS muestran otra excelente manera de hacer que su sitio web se destaque fuera de la multitud. Y también puede consultar nuestras mejores herramientas de diseño web que lo ayudarán en sus esfuerzos de diseño. Por ahora, sin embargo, echemos un vistazo a algunos sitios que utilizan el desplazamiento de paralaje de la manera correcta.
Historia del arte del diseño web
La historia del arte y el diseño web no son temas que debas reunir necesariamente, pero son hermosos unidos en este sitio de historia del arte del diseño web, que traza el futuro del diseño web observando el arte a través del tiempo.
Aquí hay una variedad de técnicas de desplazamiento de paralaje en juego, lo que significa que los usuarios se sorprenden y deleitan constantemente mientras se desplazan hacia abajo en la página. Vale la pena dedicar un poco de tiempo a explorar esta página.
El catálogo interactivo de Qode
El Qode Interactive Catalog tiene un estilizado sistema de navegación de texto inferior para revelar una imagen para cada artículo. Al hacer clic en el catálogo, se ve el desplazamiento de paralaje horizontal que se usa para mostrar una variedad de temas de WordPress. No es el uso más innovador del desplazamiento de paralaje en esta lista, pero cumple bien su propósito. También se usa una salpicadura de animación con buenos resultados.
Canals
Diseñado por Marcus Brown y desarrollado por Aristide Benoist, Canals lo lleva en un viaje de 400 años a través de la historia de los canales de Ámsterdam del siglo XVII. El sitio está diseñado para brindar una experiencia de estilo editorial , como hojear el volumen de una mesa de café exuberante, y hace un gran uso del paralaje para llamar su atención sobre nuevas secciones de su historia y darle al sitio un efecto de profundidad sutil.
La historia de The Goonies
Cualquier persona de cierta edad tiene el amor garantizado «80s te en la película de aventuras, Los Goonies, y si ese es usted, este sitio seguramente hará palpitar sus glándulas de nostalgia. Creado por Joseph Berry usando WebFlow, The Story of The Goonies es un tributo a un clásico retro que usa el desplazamiento de paralaje para atraerte a la historia, presentarte a los personajes y revelar el modo de la película.
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 se escala y gira a medida que te desplazas. su camino hacia abajo en la página de paralaje. Su iluminación cambia de color cuando pasa el cursor sobre los títulos de los proyectos recientes de Dogstudio, y quizás nuestra parte favorita es cuando gira frente a parte de la copia de la página, oscureciendo parte del texto.
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 3D, que aparecen en una variedad de escenas en todo el sitio (incluida esta descarada referencia de Sagmeister & Walsh). El uso inteligente de paralaje amplifica el efecto 3D y, junto con fondos claros, brillantes y llamativos, nunca se vuelve abrumador o irritante.
Diesel: BAD Guide
84.Paris creó este impresionante sitio web de paralaje (y la campaña de redes sociales asociada) 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 BAD».
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 («Desliza hacia la derecha, derecha, derecha, derecha; los ordenarás más tarde «) a Instagram (» No olvides ponerte en contacto con un ex los jueves #TBT «), acompañado de ilustraciones monocromáticas.
Firewatch
Uno de los Los ejemplos más hermosos de desplazamiento de paralaje que hemos visto es este sitio web del 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 está quieto para que pueda leer la información sin marearse. Si quieres ver cómo se hace, aquí tienes una buena demostración de CodePen.
GitHub 404
La página 404 de GitHub no es estrictamente un desplazamiento de paralaje, ya que el efecto ocurre en el movimiento del mouse en lugar del desplazamiento, pero es una página realmente divertida que usa capas para agregar profundidad. A diferencia del paralaje «adecuado», el fondo se mueve más rápido que el primer plano, creando una sensación desorientadora y de otro mundo.
Jess & Russ
No es de extrañar que el sitio web de la boda de la poderosa pareja de diseño Russ Maschmeyer y Jessica Hische sea una belleza para la vista. El sitio traza su historia romántica, con desplazamiento de paralaje utilizado para agregar profundidad a las ilustraciones. Se casaron en 2012, pero el sitio web todavía merece la pena.
Haga que su dinero importe
Las finanzas y el dinero no son los temas más interesantes. Pero la agencia digital Firstborn, con sede en Nueva York, está de acuerdo con este dinámico sitio web de desplazamiento de paralaje, Make Your Money Matter for the Public Service Credit Union.
Con el objetivo de enseñar al público los beneficios de unirse a una cooperativa de crédito, en lugar de utilizar un banco, este sitio brillante incluye todo, desde cómo funciona una cooperativa de crédito, hasta dónde encontrar una y cómo solicitarla, así como una calculadora que muestra cuánto se benefician los bancos de los depósitos de los clientes.
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 añade un enorme cantidad de profundidad.
New York Times: Tomato Can Blues
En la era actual de poca capacidad de atención y medios de comunicación de tamaño reducido, ¿cómo atrae a la gente al periodismo de larga duración? Tomato Can Blues es una gran respuesta a ese problema del New York Times, combinando algunas técnicas inteligentes de diseño web con narraciones e ilustraciones inspiradas en cómics creadas por Atilla Futaki.
Uno de los mejores ejemplos de desplazamiento de paralaje que «Como he visto, el artículo te lleva a través de la historia de una luchadora enjaulada escrita por Mary Pilon. A medida que te desplazas por el contenido, las ilustraciones cobran vida con ingeniosas animaciones y alteraciones, lo que te permite sumergirte completamente en el contenido. >
Las ilustraciones de Futaki se basaron en registros policiales, relatos de testigos, fotografías y notas del reportero, y la atención al detalle se destaca. En general, es una gran experiencia de lectura: ¿es este el futuro del periodismo en línea? ?
Caída de nieve
Uno de los primeros sitios en Realmente empuja los límites de lo que podría hacer con contenido editorial de formato largo en línea, el artículo «Snow Fall» del New York Times combina una variedad de elementos diferentes, incluido el desplazamiento de paralaje y el video web.
El artículo, sobre el horror de una avalancha en Tunnel Creek, se publicó en línea en diciembre de 2012, pero aún se mantiene firme como un ejemplo de lo que se puede hacer con el desplazamiento de paralaje. El periódico presentó el artículo ganador del Pulitzer de una manera innovadora que atrajo la atención de la comunidad de diseño en todo el mundo.
- 19 realmente útil respuesta tutoriales de diseño web
- mejores discos duros externos
- páginas de error 404 con un diseño brillante