Efectos creativos de parallax scrolling
Parallax scrolling es una tendencia de diseño web que se niega a desaparecer. Los efectos parallax es cuando el diseño del sitio web en 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 página 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.
Mejores ejemplos de efecto Parallax en diseño web
01. 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
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
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
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. Hello moday
Hello moday 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
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
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
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
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
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
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
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
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
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
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
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
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
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.
