Inicio > Diseño Web > 42 Ejemplos de Desplazamiento de Paralaje en el Diseño de Web

42 Ejemplos de Desplazamiento de Paralaje en el Diseño de Web

Image representing Spotify as depicted in Crun...El paralaje es una diferencia en la posición aparente de un objeto visto a lo largo de líneas diferentes en la vista. El término se deriva de la palabra griega parallaxis, significando la modificación. En el diseño  web, el efecto de paralaje es relativamente una nueva tendencia. El efecto en sí mismo ha estado alrededor un rato, pero últimamente se hace más usado y se habla más de él.

El efecto de Paralaje o el desplazamiento de paralaje en el diseño de web es la técnica que presenta imágenes acodadas que se mueven alrededor del sitio Web en velocidades/perspectivas diferentes que crean una 3ª ilusión agradable e interesante. Juntamos algunos ejemplos de sitios Web usando el efecto de paralaje para inspirarle. Este efecto ciertamente hace que el desplazamiento alrededor de los sitios Web sea una experiencia interesante.

 

cultural solutions uk

 

cultural solutions uk

Campaign Monitor is Hiring

 

Campaign Monitor is Hiring

International Watch Co

 

International Watch Co

Marmoset

 

marmowset(1)

 

Spotify podría querer esto para empezar a ver con este nuevo sitio de música.

Creado por un equipo de artistas musicales que trabajan honestamente, Marmoset le ayuda a crear la ‘banda sonora de su historia’, mientras que pelea la buena batalla para restaurar el valor y el respeto por la música y sus creadores.

La función única aquí es la forma en que Marmoset le permite encontrar el tipo de música que le gusta en función de variables tales como la ‘energía’, ‘longitud’ y ‘género’. Algunos efectos de desplazamiento de paralaje fresco y fotografía llamativa son la guinda del pastel, haciendo su oferta aún más atractiva.

 

Nike Better World

 

Nike

La Moulade

 

La Moulade

 

La Moulade presenta una singular navegación widget que flota en la parte superior como un ejemplo de la creciente cantidad de sitios que utilizan la posición de desplazamiento de la página para generar animación y movimiento, este diseño de una agencia francesa La Moulade también presenta una singular navegación widget que flota en la parte superior, que muestra tanto en dónde estás, y proporciona un acceso rápido a otras zonas.

 

Webdesign Karlsruhe

 

Webdesign Karlsruhe

 

Haga clic en los círculos y se sorprenderá.

 

YEBO Creative

 

Yebo

Health Service Payouts

 

Health Service Payouts

 

Esta infografía en línea destaca el problema de la cultura de pago de la compensación de la salud.

Si los servicios médicos se proporcionan en privado o públicamente, la cuestión de las indemnizaciones enormes es una preocupación creciente para las organizaciones de salud en todo el mundo. Y esta infografía en línea destaca el problema utilizando una técnica de desplazamiento del ojo en los fondos.

Al desplazarse por la página, usted sigue a un portero de un hospital empujando un carrito a través de las secciones de un corredor. Cada sección representa otro año en la historia del Servicio Nacional de Salud del Reino Unido, y un globo emergente muestra los detalles del mayor pago de compensación de ese año. Es un dispositivo simple, pero perfectamente ejecutado y una forma atractiva de transmitir una gran cantidad de información sobre una superficie seca, aunque en una importante tema.

‘Las piezas se construyen utilizando algunas de las técnicas más avanzadas en HTML5, CSS3 y JavaScript, explica Stickyeyes, la agencia que creó la infografía para Express Solicitors”. Como la animación fue un factor clave en esto, utilizaron principalmente la biblioteca Skrollr de animación para todos los efectos de movimiento. Cada uno de los elementos se ilustra de forma manual, entonces tomaron la función de desplazamiento con el fin de crear la función de imitación de scroll parallax. Esto fue luego apoyado por otras animaciones CSS3 para los toques finales.

 

Head2Heart

 

Head2Heart

We are Unfold

 

We are Unfold

 

La lista desplazable funciona bien con un menú de navegación superior derecho.

Aquí la agencia noruega Unfold  utiliza una combinación de desplazamiento sin fin y una pequeña cantidad de paralaje para crear un esquema inusual y eficaz en la navegación web. Los principales vínculos entre las áreas de contenido aparecen en la parte superior derecha de la ventana en todas partes, pero al llegar a la parte inferior del diseño en una sola página, la página sigue desplazñandose, dejando al descubierto la parte superior de la página, una vez más.

 

Len M

 

Len M

iutopi

 

iutopi

Savings Challenge

 

Savings Challenge

 

El sitio le ayuda a descubrir cuánto podría ahorrar en su coche.

La última promoción para dar a conocer un concesionario de coches de la red de Arnold Clark, donde se pide a los clientes a ‘desafiar’ al vendedor en su concesionario local para ahorrar dinero en sus gastos mensuales de automovilismo, el equipo web de la casa se le ocurrió la idea de un sitio de paralaje construido en un estilo de infografía – el sitio Savings Challenge.

‘El diseño se basa en la idea de los billetes que se puede plegar en el elemento clave’, dijo el diseñador, Stephen Kay. ‘De ahí el lema de’ hacer más con su dinero ‘. Esta noción de plegado ayudó a formalizar no sólo el diseño inicial del logotipo, sino también el potencial de una página móvil, web interactiva. En realidad, se presta a ser animada ‘.

Una vez en el desarrollo, el guión gráfico se divide en siete ‘escenas’ clave con el fin de ayudar a controlar el flujo de trabajo y el proceso de comprobación. Los desarrolladores utilizan skrollr.js como su tecnología central para controlar los eventos de desplazamiento del usuario. Esto permitió la creación rápida de prototipos, dándole más tiempo para suavizar las transiciones y la creación de una interfaz de usuario funcional.

 

Cyclemon

 

Cyclemon

 

El sitio cuenta con casi todos los tipos de bicicletas que hay.

Algunos dicen que somos lo que comemos, otros dicen que es lo que utiliza la bicicleta. Aquí, los diseñadores y entusiastas de la bici Romain BourdieuxThomas Pomarelle se unieron para crear el sitio scroll parallax Cyclemon. Con magníficas ilustraciones, tipografía inventiva y el desplazamiento inteligente, el sitio sin problemas se une.

Pasar de un hipster a un abuelo, un puma a un freestyler, los chicos han llegado a casi cualquier tipo de bicicleta que hay. Y no es sólo el sitio web que muestra las bicicletas – Bourdieux y Pomarelle también han creado una serie de impresiones serigráficas de bicicletas.

Cada ilustración está impresa en papel blanco FabrianoRosaspina en cinco colores diferentes hechos a mano con una técnica no-tóxica. Cyclemon es sin duda uno de los diseñadores de bicicletas locos que hay por ahí.

 

Drupalcon Denver 2012

 

Drupalcon Denver 2012

Ben the Body Guard

 

Ben the Body Guard

Fingerbilliards

 

Fingerbilliards

Lexus

 

Lexxus

 

Disfrute del nuevo Lexus sin visitar la sala de exposición en este sitio interactivo

El nuevo Lexus IS es una berlina de lujo, que ahora se puede experimentar de una manera completamente inmersiva, incluso antes de visitar una sala de exposición. Desarrollado por el equipo de consultoría tecnológica sorprenda, el vídeo interactivo permite a los espectadores a explorar a fondo el interior y características exteriores de la última edición a la línea híbrida de Lexus.

Como socio digital a largo plazo de Lexus, Amaze ha utilizado una combinación de secuencias de acción en vivo y CGI para permitir a los espectadores ver y controlar su experiencia de visualización. Los usuarios pueden hacer todo, desde la selección del diseño de color exterior para entender más acerca de los controles, el manejo preciso y la ingeniería que hay detrás del nuevo coche.
Fácilmente accesible

 

El equipo de Amaze para crear una mezcla perfecta entre lo real y lo virtual, se filmó la conducción de automóviles a través de diferentes paisajes y se asoció con una alta gama de visualizaciones 3D de  estudio RTT con sede en Munich para explorar y tomar imágenes de 360 ​​grados del medio ambiente en los puntos clave. Construido en HTML5, la experiencia funciona en todos los dispositivos y características que el contenido de una aplicación para promover y vender el nuevo modelo.

 

Kisko Labs

 

Kaiku

Guy Vernes

 

GuyVernes

Life in my Shoes

 

Life in my Shoes

 

La página cuenta con un animado efecto de paralaje.

Life In My Shoes es una potente campaña multiplataforma dirigida a los jóvenes que desafía el miedo y la incomprensión que rodea al VIH. La Agencia digital con sede en Londres ha informado con el desarrollo de un sitio web que atrae a un público juvenil.

La fuente de la marca, Houshka Rounded Medium, se llevó a cabo usando un font-face para obtener el sitio web con un aspecto más atractivo e intuitivo. Las imágenes decorativas y acentos amarillos dramáticos en todo proporcionan una estética atractiva.

La página ‘About Us’ cuenta con un animado efecto de paralaje que se ajustó para las tablets y teléfonos inteligentes. ‘Escribimos una consulta en los medios para estos dispositivos que cambia el fondo-attachment de fijo a desplazarse, y establece los distintos fondos en las posiciones para que las imágenes se sienten en el lugar correcto’., explica el equipo de Traffic.

 

Netlash-bSeen

 

Stel Jouw vraag

The Beast

 

The Beast

 

El sitio de la cantante popular con auto-desplazamiento que se lee como un poema.

El álbum de la cantante de Folk Laura Marling, Creature I Don’t Know, se le dio un sitio web de acompañamiento realizado por la agencia de Londres Juice Studio con ilustraciones de Shynola. Es un sitio que se auto-desplaza como un poema para leer, mientras vívidas ilustraciones y animaciones pasan con perspectivas de paralaje que se revelan.

El sitio hace un amplio uso de nuevos elementos semánticos y los datos * atributos utilizados para activar las animaciones en puntos específicos de referencia de audio (Por ejemplo, los cambios de escena, las claves de animación, etcétera) y también asigna velocidades de control y la orientación de los elementos móviles de paralaje.

Egopop Creative Studio

 

Efectos de paginas web

 

Mueva el ratón y verá los efectos.

 

Jan Ploch

 

Jan Ploch

unfold

 

Efectos para las paginas web

manufacture d’essai

 

manufacture d'essai

19 Simple and Clean Logos

 

19 Simple and Clean Logos

17 Inspiring Examples of Parallax Scrolling Sites

 

17 ejemplos de scrolling parallax

Type and Color Inspiration from Package Design

 

Type and color inspiration from package design

17 Clean Web Designs for Your Inspiration

 

17 clean web designs for your inspiration

The Lab

 

Alzheimer

 

Este sitio de desplazamiento de paralaje es diferente y al instante en la participación.

La investigación del Alzheimer, la principal organización benéfica de investigación de la demencia en el Reino Unido, tiene como objetivo comunicar la información sobre la demencia en una forma atractiva usando su sitio Web The Lab.

De la idea al tratamiento, el usuario puede desplazarse a través de dos laboratorios y una clínica, cada uno de los cuales está lleno de información emergente con botones.

Al hacer clic, se abren nuevas páginas con información detallada sobre cómo las ideas de los científicos se convierten en realidad y cómo esto puede hacer la diferencia para los miles de personas que viven con la enfermedad.

 

Why Your Brain Craves Infographics

 

Why Your Brain Craves Infographics

 

Una infografía para terminar todas las infografías.

Neo Mam Studios han llegado con un bonito diseño y con una  brillantemente ejecutada infografía. Una experiencia en línea construida con HTML5 y CSS3, el reto en la construcción de la infografía era mantener el CSS lo más simple posible.

‘Los efectos de desplazamiento de paralaje era probablemente lo más difícil de lograr’, dice Danny Ashton de Neo Mam.

‘Nuestros desarrolladores examinaron las bibliotecas disponibles y los describieron como un poco’ flojo ‘, por lo que terminaron creando su propio lugar.’ Siguió diciendo Danny Ashton de Neo Mam.

 

5emegauche

 

5emegauche

 

Cada página tiene su propio mecanismo de desplazamiento.

En la mayoría de los casos cuando se desplaza, que está desplazando a una página diferente. Pero en la página web de este organismo, cada página tiene su propio pedazo de mecanismo de desplazamiento o elemento que hace que todo sea muy interesante. Es un enfoque brillante y divertido diseño de paralaje y demuestra que la técnica sigue produciendo resultados inventivos.

 

Atlantis World’s Fair

 

Atlantis World’s Fair

 

Atlantis World’s Fair usa desplazamiento de paralaje para contar su historia.

Un ejercicio para demostrar apoyo WOFF de IE9, esta infografía en línea está diseñada por Frank Chimero donde utiliza algunos desplazamientos de paralaje, no simplemente como una manera de presentar la información, sino como una manera de animar y de contar la historia. Un divertido e interesante enfoque de información interactiva, este es un ejemplo de un perfecto de scroll parallax.

 

Every last drop

 

Every last drop

 

El uso justo del desplazamiento de paralaje de Atlantis World para contar su historia

Un ejercicio para demostrar apoyo WOFF de IE9, esta infografía online diseñada por Frank Chimero utiliza algunos scroll parallax no sólo como una manera de presentar la información, sino como una manera de animar a la información y contar la historia. Un enfoque divertido e interesante a la información interactiva, esto es un ejemplo perfecto de scroll parallax.

 

Golden State of Mind

 

Golden State of Mind

 

Golden State of Mind muestra lo mejor de California.

Golden State of Mind fue construido por Juxt Interactive para mostrar, ‘el arte, la moda y los acontecimientos en directo desde California. El Director creativo Jeff Whitney comentó: ‘una barra de desplazamiento personalizada fue un plug-in encontrado y algo pesadamente modificado para permitir el desplazamiento infinito, y un montón de sudor y lágrimas para conseguir la invertida del desplazamiento para que funcione correctamente’.

 

Living Word

 

Living Word

 

En el Reino Unido la Agencia de diseño Tribe ha desarrollado este desplazamiento de paralaje en el sitio para la Agencia de traducción WordWhen, que pidió un relanzamiento digital vuelve a enchufar, tribu llevó a la creación de un sitio a diferencia del resto. La solución fue desarrollar un efecto de paralaje capaz de ofrecer una gran cantidad de información, manteniendo el interés del usuario. La idea era valiente, pero funciona bien, la entrega de un impresionante viaje de los clientes de forma interactiva e intuitiva.

 

Spotify

 

Spotify

 

Spotify emplea el uso sutil de scroll parallax en su página introductoria.

El Streaming de música en la aplicación Spotify se explican sus características y beneficios en una página de aterrizaje que le da un toque sutil de scroll parallax para sus imágenes de fondo.

 

Madwell

 

Madwell

 

La agencia de New York Madwell utiliza scroll parallax para añadir una sensación de profundidad.

El diseño y desarrollo de la agencia Madwell, con sede en Nueva York, muestran su portafolio con una amplia gama de efectos de desplazamiento de paralaje para crear un estilo 3D notable que añade una gran cantidad de profundidad.

 

The Jacksonville Downtown Art Walk

 

The Jacksonville Downtown Art Walk

 

The Jacksonville Downtown Art Walk.

The Jacksonville Downtown Art Walk es un festival de artes mensual que abarca más de 15 bloques y toma en decenas de galerías, museos y bares, con artistas callejeros y música en vivo. Su hermoso lugar cuenta con un sutil efecto de paralaje en acuarela que hace desplazar una alegría.

 

Artículos relacionados:

 

Artículos y Tutoriales para Empezar con jQuery

+25 Plugins Asombrosos de Resbalador jQuery Responsive

La verdad detrás de diseño Web Responsive: ¿Es la próxima gran esperanza o todo es un bombo?

15 Memorables Plugins jQuery Timeline: Introduzca Líneas de Tiempo en su Página Web

15 Temas Impresionantes Responsive para WordPress (Theme Junkie)

+60 Útiles Deslizadores o Sliders de Imagen jQuery Responsive

+ 30 Herramientas útiles de Diseño Web Responsive

 

Los Mercados Online de Envato: ebooks, tutoriales, vídeos, plugins, cursos, temas para WordPress y Apps

  1. 17 de octubre de 2013 en 8:10 PM

    Muchas gracias, debo haber estado leyendo como 5 minutos pero valió la pena! Me quite una duda y ahora podre implementarlo en mi blog.

    Un saludo sigan así.

  1. No trackbacks yet.

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

Únete a otros 5.538 seguidores

%d personas les gusta esto: