EntradaEjemplos de desplazamiento de Parallax. Landing page universal con efecto de paralaje
Con la aparición y el uso generalizado de HTML5 (un nuevo estándar para estructurar y presentar contenido en la World Wide Web) y CSS3 (una versión mejorada del lenguaje de descripción apariencia objetos), fue posible crear elementos de diseño más interesantes y memorables para todas, sin excepción, las páginas de Internet, incluidas, por supuesto, las páginas de destino.
Desplazamiento de paralaje (del inglés desplazamiento de paralaje, en diseño web: una técnica especial utilizada principalmente en gráficos por computadora, cuando las imágenes de fondo en perspectiva se mueven más lentamente que los elementos en primer plano): esta es una de las tecnologías avanzadas diseño web moderno... Pero su uso excesivo puede degradar la usabilidad de un sitio y provocar una caída en las tasas de conversión.
Hoy hemos preparado para usted una selección única de sitios de paralaje y le recomendamos que se familiarice con ejemplos de las páginas de destino más exitosas que utilizan este efecto. Algunas parecen obras de arte, otras sorprenden por su formato extraordinario, pero todas merecen tu atención. Echemos un vistazo al paralaje y qué es con ejemplos.
1. Diseño plano vs realismo
¿De qué lado estás?
Con la ayuda de gigantes como Microsoft, Google y Apple, (diseño plano) en un abrir y cerrar de ojos se convirtió en el éxito de la temporada y el tema de discusión en cientos de noticias y blogs. Se percibió como una especie de gran avance en el campo del diseño web y, muy probablemente, realmente lo fue. La agencia interactiva intacta decidió llamar la atención de sus clientes sobre esta etapa bastante inusual en el desarrollo del diseño virtual y preparó un viaje interactivo, dándole el título “Diseño plano versus realismo”. Todo esto fue creado, por supuesto, no sin la ayuda de un efecto novedoso.
El director creativo de la agencia, Alejandro Lazos, explica que lo más desafiante fue combinar un juego HTML5 con desplazamiento de paralaje.
“Queríamos que toda la acción ocurriera de forma continua para que los usuarios pudieran moverse de principio a fin sin detenerse. Para ello, utilizamos la tecnología ajax, que permitió transferir datos a través de la url y actualizar los datos en segundo plano, proporcionando al usuario la página adecuada sin demora ".
2. Sony
¡Nunca has visto nada como esto!
Probablemente nadie en el mundo sepa cómo presentar sus productos como lo hace Sony. Esta página de destino es parte de la campaña "Be Moved" de Sony, sobre la cual dicen lo siguiente:
“De alguna manera nos llamaron conejillos de indias, porque todas las innovaciones que presentamos son adoptadas inmediatamente por empresas competidoras. Querían hacernos daño, pero lo tomamos como un cumplido. La colaboración de artistas e ingenieros es siempre un experimento, pero solo entonces puedes esperar que mañana des un paso adelante ".
3. Costa Coffee
Graphite Digital eligió las ilustraciones que representan de manera más expresiva los productos de la empresa
Esta impresionante página de una página es una creación de la agencia Graphite Digital de Brighton. En el pasado reciente, la agencia tuvo la tarea de presentar el producto de Costa Coffee de una manera brillante e interesante.
El resultado del trabajo merece todos los elogios. La página de destino se ve hermosa. Está lleno de todo tipo de elementos interactivos e ilustraciones animadas.
4. Carretera Uno
El gran peso de la imagen resultó ser un problema importante para los desarrolladores
Este impresionante micrositio, diseñado por la agencia de Newcastle Shout Digital para la agencia de viajes Exsus, una compañía de vacaciones de lujo y luna de miel, es otro gran ejemplo de este tema. Su animación de estilo retro capta instantáneamente tu atención y nunca la suelta hasta los créditos finales.
Conduce un Cadillac Eldorado clásico de 1959 para visitar todas las famosas costas de California. A primera vista, todos los efectos parecen simples, pero una vez que comienzas a desplazarte, la verdadera magia se abrirá frente a ti.
5.Haga que su dinero importe
Administre sus finanzas de la forma en que Make Your Money Matter aconseja
Mucha gente está interesada en el tema del dinero y las finanzas personales, por lo que la agencia digital neoyorquina Firstborn, al preparar un pedido para una cooperativa de crédito, prefirió un formato innovador a uno tradicional.
Propóngase crear conciencia Público objetivo Sobre las ventajas de una cooperativa de ahorro y crédito (y las desventajas de los bancos), los especialistas en marketing han creado una increíble página de inicio que explica de forma accesible e interesante cómo funciona una cooperativa de ahorro y crédito, dónde encontrar las oficinas de la organización y mucho más. Además, existe una calculadora que calculará el beneficio que reciben los bancos de sus inversiones.
6. Cyclemon
La página de destino le mostrará todos los tipos de bicicletas existentes.
Los sabios chinos dicen: "Eres lo que comes". Para los diseñadores y entusiastas de las bicicletas Romain Bourdieux y Thomas Pomarelle, esta famosa sabiduría es "Eres lo que conduces". Su sitio web en coautoría lo sorprenderá no solo con un desplazamiento novedoso, sino también con un gran sentido del humor e ilustraciones de primera clase.
Los desarrolladores, al parecer, no se perdieron ni un solo tipo de bicicleta y trataron de presentarlas de tal manera que cada visitante estuviera ansioso por comprar una y unirse a la subcultura multimillonaria.
7. Lexus
Puedes probar el coche mientras te quedas en casa en tu cómoda silla
Gracias a este sitio puedes probar nuevo modelo de la línea Lexus sin salir de casa. El video interactivo desarrollado por la agencia de consultoría digital Amaze le proporcionará información completa y altamente visual sobre el interior y el exterior del automóvil Lexus IS. El efecto de la presencia está asegurado.
Para lograr este resultado, el equipo de marketing necesitaba capturar el automóvil con el telón de fondo de una variedad de paisajes y escanear la vista circundante en cada uno de los puntos clave. Gracias a la tecnología HTML5, la página de destino funciona tanto en computadoras como en teléfonos inteligentes, lo que hace que la promoción de automóviles sea más exitosa que nunca.
Wendy Stonefield, directora comercial de Amaze, señala: “El uso de HTML5 nos ha permitido alcanzar varios objetivos. En primer lugar, es una demostración visual del automóvil y sus características funcionales. En segundo lugar, es la interactividad, de la que nadie puede prescindir. proyecto moderno: en este caso, permitimos a los usuarios elegir el color del interior y la carrocería del automóvil. Al crear videos, nos enfocamos en el espectador sofisticado, y con las tecnologías que existen hoy, esto se ha vuelto más que posible. Mostramos el Lexus IS como realmente es ".
8. La vida en mis zapatos
Life in my Shoes (del inglés, a través de los ojos de otra persona) es un proyecto ambicioso, cuyo principal objetivo es erradicar el miedo y los prejuicios contra las personas infectadas por el VIH y concienciar a las generaciones más jóvenes sobre el VIH y el sida. La agencia Traffic, con sede en Londres, tenía la tarea de diseñar una página de destino que captara la atención de una audiencia joven y se ganara su confianza, e hicieron un gran trabajo con ella.
La fuente corporativa Houshka Rounded Medium se ha implementado con soporte para la sintaxis de tipografía, lo que hace que la página parezca más viva e interesante. Otros elementos decorativos junto con el uso del amarillo hicieron que el recurso fuera estéticamente agradable.
9. La Bestia
La nueva página de inicio del famoso cantante de folk recita poesía y los acompaña con imágenes increíbles
Para promocionar el nuevo álbum de Laura Marling, A Creature I Don "t Know", la agencia digital con sede en Londres Studio Juice ha desarrollado una increíble página de inicio que lee poesía acompañada de exquisitas ilustraciones y animaciones expresivas.
Para crear tal milagro, se utilizaron nuevos elementos semánticos y atributos, gracias a los cuales las animaciones se sincronizan con la banda sonora y su velocidad coincide con los parámetros especificados anteriormente.
10. El laboratorio
Alzheimer's Research, la agencia líder en el Reino Unido para la enfermedad de Alzheimer, se compromete a comunicar su trabajo y sus resultados de una manera divertida y accesible. Para ello, se creó el recurso The Lab.
En la página, cada usuario tiene la oportunidad de familiarizarse con los laboratorios y la clínica de la institución, y los consejos emergentes de forma concisa explican lo que se muestra en la pantalla. Si hace clic en cualquiera de ellos, obtendrá información más detallada. La demostración de cómo los científicos dan vida a sus teorías y dan esperanza a millones de personas está en su mejor momento.
11. Por qué su cerebro anhela las infografías
Infografías sobre infografías!
NeoMam Studios presentó una excelente página de inicio de desplazamiento de paralaje que destaca las principales ventajas de la infografía como método de presentación de información.
"El desplazamiento de Parallax es lo más difícil que tienen que implementar nuestros desarrolladores", dice Danny Ashton, director de la empresa. "Pensaron que todas las bibliotecas disponibles eran triviales, por lo que crearon las suyas propias".
12.5emegauche
La característica principal de este recurso es que cada una de sus páginas está dotada de su propio mecanismo de desplazamiento. ¡Cada uno! Este es un enfoque muy divertido y muy exitoso, que también demuestra que esta tecnología le permite inventar formas ingeniosas de presentar información.
13. Feria Mundial de Atlantis
El desplazamiento inusual aquí no funciona tanto para el entretenimiento como para la trama.
Esta infografía en línea fue desarrollada por Frank Chimero, quien usó el desplazamiento de paralaje no solo para presentar información de manera más eficiente, sino también para animarla y encajarla en una historia específica. ¡Acrobacia aérea!
14. Hasta la última gota
¡Aprenda sobre el problema global de la falta de agua potable!
El estudio de animación Nice & Serious diseñó esta página de inicio para concienciar al público sobre el problema de la escasez de agua potable en el planeta. ¿Dónde gastamos el agua? ¿Dónde podríamos guardarlo? ¿Cómo hacerlo? Aprenderás todo sobre este problema. Hasta la última gota.
15. Palabra viva
La agencia digital Tribal se encargó de actualizar la representación en línea de la agencia de traducción Living Word y hacerla informativa e interesante. Puede admirar el resultado usted mismo, pero digamos de inmediato que a los británicos no se les ocurrió nada inusual, pero lo hicieron todo de manera ordenada y limpia.
16. Madwell
El desplazamiento Parallax agrega profundidad a las páginas de destino de Madwell
La agencia de desarrollo empresarial con sede en Nueva York, Madwell, utiliza una página de destino para presentar su cartera. El desplazamiento de Parallax es una especie de entusiasmo en la acción que organizan: el efecto 3D resultante agrega profundidad a su creación.
17. Paseo del arte en el centro de Jacksonville
El Jacksonville Downtown Art Walk es un evento tradicional de arte y cultura mensual en Jacksonville, Florida. El festival se extiende a lo largo de 15 cuadras y se compone de docenas de galerías, museos y bares. Todo ello acompañado de actores y músicos callejeros. Un hermoso sitio web sobre este evento puede traer un ambiente alegre a su hogar.
18. Von Dutch
La marca de moda Von Dutch cuenta la increíble historia de vida de su fundador desde las páginas de su sitio web. Sin lugar a dudas, para estar en tendencia, se utilizó un nuevo tipo de desplazamiento para el sitio. A medida que se desplaza por la página, las imágenes y los iconos flotan hacia arriba y hacia abajo, dando la impresión de que alguien ha vertido agua en su monitor mientras no estaba.
19. Fannabee
Fanabee es una página de destino creada no tanto para los amantes de la música, sino para los que la coleccionan. Con este servicio, puede publicar una lista de lo que ha recopilado (CD, carteles, camisetas, etc.) y encontrar lo que se está perdiendo.
20. Peugeot Hybrid4
Las nuevas tecnologías deben presentarse de una manera nueva, ¿verdad?
La tira cómica online, encargada por el gigante de la automoción Peugeot (Peugeot), permite a la empresa realizar dos tareas a la vez: en primer lugar, presenta de forma bastante eficaz a la atención del público objetivo. nuevo mecanismo Peugeot Hybrid4, y en segundo lugar, trabaja por la imagen tanto del producto como de la propia empresa: unirse a Peugeot, que experimenta audazmente con los formatos y no se olvida de su individualidad, ahora cobrará aún más prestigio.
21. Soluciones culturales
Cultural Solutions es una agencia de consultoría que, como su nombre indica, se ocupa de temas relacionados con el arte. El logotipo de la empresa consta de círculos multicolores superpuestos entre sí. Es por eso que en la página principal del sitio estos círculos se reproducen con la ayuda del efecto de paralaje. Los círculos se mueven con diferente velocidad y agrega profundidad y dimensión. El resultado es una declaración lacónica, pero muy espaciosa y elegante.
22. Conferencia jQuery
Los desarrolladores del sitio web de jQuery Conference no se olvidan de lo principal: mantienen el equilibrio adecuado entre el contenido de la información y la vistosidad.
El sitio, creado específicamente para la conferencia jQuery, está ejecutado con ficción. A medida que se desplaza hacia abajo en la página, el desplazamiento de paralaje de jquery desencadena una cadena de diferentes animaciones: una bicicleta viajando de izquierda a derecha o una bandada de gaviotas persiguiendo un tiburón. En general, es original y no está sobrecargado de efectos: después de todo, lo principal no es solo sorprender, sino también ser escuchado.
23. Forma
La agencia creativa Shape en su página de inicio de forma bastante lacónica habla sobre las principales etapas de sus actividades. Las bonitas imágenes y animaciones añaden claridad.
24. Nintendo
Presentar al público objetivo a series nuevas Mario Kart Games, una reconocida empresa japonesa, ha desarrollado una página de destino que cuenta sobre el juego en el formato de un viaje corto alrededor de su mundo. El diseño de la página de destino y su combinación de colores copia el estilo del juego y, a lo largo del camino, conocerás personajes familiares de la infancia.
25. Activar bebidas
Simplemente desenrosque la tapa y comenzará la acción.
La empresa Activate Drinks se dedica a la distribución de bebidas fortificadas, y para promocionar sus productos ha desarrollado un recurso que es relevante en todos los aspectos. Primero desenroscas la tapa de la botella (desplazándote por la página, por supuesto), y luego te encuentras en un torbellino de burbujas rápidas. Tres niveles de ubicación de burbujas crean un efecto 3D y una sensación de salpicadura en el monitor.
26. Cronología de Irak de The Whitehouse
El desplazamiento inusual se usa no solo para mejorar el lado estético de la campaña, sino, en el caso del gobierno de los Estados Unidos, para agregar significado y emoción a la página. Puede notar que todo el contenido se desplaza mucho más rápido que las imágenes subyacentes. Esto se hace a propósito para mantener la atención del lector precisamente en estas ilustraciones, que tienen un impacto en las emociones de los visitantes.
27. Historias de portada de Pitchfork
El renombrado sitio de música Pitchfork ha causado un gran revuelo con el ambicioso proyecto Cover Stories. El recurso de Internet adquirió algunas de las características de una revista impresa brillante, pero la aplicación del efecto de paralaje para el sitio, videos interactivos, entrevistas y fotografías únicas lo hizo diferente a cualquier otra cosa. Fotos de retratos animados, texto conmovedor y una banda sonora perfectamente combinada, muy elocuente y exquisita.
28. Soleil Noir 2012 | Creemos en ...
Cautivante minimalismo de los franceses de Soleil Noir
Esta peculiar página de destino diseñada por los franceses de Soleil Noir es esencialmente una tarjeta de Año Nuevo. Aquí no encontrarás nada complicado: vertiginoso desplazamiento de paralaje, minimalismo en las ilustraciones, frases lacónicas, pero esta simplicidad cautiva.
29. Oakley
Oakley combina un impresionante desplazamiento de paralaje con una fotografía expresiva
Oakley es un proveedor reconocido de gafas protectoras y antiparras, y este recurso se ha desarrollado específicamente para promocionar el nuevo modelo de gafas Airbrake MX. La página de destino combina un impresionante desplazamiento de paralaje con fotografías expresivas que presentan a la perfección el producto.
30. Jason Kenny OBE
Página de destino del tres veces campeón olímpico y dos veces campeón mundial de carreras de ciclismo Jason Kenny
A principios de este año, la agencia de marketing de Bristol Fiasco Design diseñó este maravilloso página de destino para el tres veces campeón olímpico y dos veces campeón mundial de ciclismo Jason Kenny. El cofundador de la agencia, Ben Steers, afirma: "Basándonos en los términos de referencia, decidimos crear un sitio web de una página con desplazamiento vertical y paralaje ".
31. La Moulade
La barra de navegación le permitirá navegar rápida y fácilmente a área deseada paginas
Un número creciente de páginas de destino utilizan la posición de la barra de desplazamiento para activar animaciones y efectos de sonido, la creación de la agencia francesa La Moulade destaca con un indicador muy inusual de su posición en la página. Está ubicado en la parte superior y también le da acceso a cualquier parte del sitio.
32. Walking Dead
Lo más difícil es combinar los logros de todas las tecnologías.
“En primer lugar, nosotros mismos somos fanáticos de este programa”, el diseñador principal Gavin Beck comparte sus impresiones de trabajar en el proyecto. - Nuestros planes eran crear un sitio web que se adaptara al mundo ” Muertos vivientes”Que los fans del programa lo agradecerían y estudiarían. Para lograr nuestros objetivos, utilizamos nuevos desarrollos como HTML5, CSS3, JavaScript / jQuery, Web Audio / HTML5 Audio y, por supuesto, desplazamiento de paralaje. El mayor desafío fue lograr que todas estas tecnologías funcionaran juntas y estuvieran disponibles en todo tipo de plataformas ".
33. New York Times: Tomato Can Blues
¿Podría ser este el futuro del periodismo online?
En una era en la que la gente no se carga con la lectura de periódicos y revistas, muchos periodistas se preguntan cómo atraer la atención de la audiencia hacia la palabra impresa. Una de las opciones para superar la crisis fue propuesta por el periódico estadounidense The New York Times, que ha desarrollado una nueva forma de presentación de artículos e historias de revistas: un sitio de una página creado con los últimos avances en el campo del diseño web y decorado con ilustraciones de Atilla Futaki.
Tan pronto como comiences a desplazarte por la página, las ilustraciones se moverán y te sumergirán en la acción descrita.
34. Pagos por servicios de salud
Nada complicado, parece, pero parece bastante entretenido.
Independientemente de si se trata de una institución de salud pública o privada, los líderes de estas organizaciones están cada vez más preocupados por el creciente volumen de pagos de compensación. La infografía presentada revela exactamente este problema, pero llama la atención sobre sí misma con paralaje.
Tan pronto como se desplace hacia abajo en la página de destino, aparecerá un profesional de la salud en la pantalla, caminando por el pasillo y empujando una camilla frente a él. Se mueve de una sección a otra, cada una de las cuales representa un año específico en la historia del Sistema Nacional de Salud del Reino Unido. Las ventanas emergentes brindan información sobre los pagos de compensación máximos que se realizaron durante estos años. Nada complicado, al parecer, pero parece bastante entretenido.
Un empleado de la agencia que desarrolló esta página de destino comparte sus impresiones del trabajo: “Para crear este sitio, aplicamos nuevas tecnologías en HTML5, CSS3 y JavaScript. Dado que las animaciones son un elemento clave, utilizamos principalmente las bibliotecas de animación "skrollr". Pintamos cada elemento a mano y agregamos los toques finales con soporte CSS3 ".
35. Estamos desplegados
Juego perfecto diferentes tipos desplazamiento
Este recurso fue creado por la agencia noruega Unfold y es un ejemplo de una combinación de efectos como el desplazamiento sin fin y el desplazamiento de paralaje. La barra de navegación, oculta en la esquina superior derecha, siempre le dará una idea de dónde se encuentra en el sitio y le permitirá moverse rápidamente al área de interés, y si se desplaza hasta el final del sitio. , notará que la barra de desplazamiento se moverá automáticamente hacia arriba y continuará desplazándose por el sitio nuevamente desde el principio.
36. Desafío de ahorro
Para crear esta página de destino, los desarrolladores utilizaron el complemento skrollr.js, por lo que los visitantes pudieron "desplazarse" por los eventos de la página. Esto permite una velocidad de simulación rápida, lo que permite más tiempo para suavizar las transiciones y crear efectos efectivos. interfaz de usuario... Se utilizó la tecnología CSS 3D para crear animaciones.
Complemento Stellar.js
Stellar.js es un complemento con el que puedes aplicar efecto de paralaje a cualquier objeto desplazable. Aunque este complemento ya no es compatible, muchos desarrolladores lo utilizan debido a su estabilidad y compatibilidad con Últimas Versiones jQuery.
Otra característica útil es la capacidad de trabajar sin la biblioteca jQuery. Por lo tanto, las páginas de destino basadas en él son más ligeras y se cargan más rápido.
Conclusión
El mundo no se detiene, y cada día surgen nuevas obras de arte en el campo del diseño web. ¿Estarás entre estos héroes? Es fácil si adopta estas excelentes tecnologías. Pero no te olvides de lo principal: ¡cualquier efecto incrustado debería aumentar la conversión! De lo contrario, simplemente no lo necesita.
La plataforma LPgenerator, más precisamente, nuestro editor visual, admite efectos de paralaje; compruébalo por ti mismo con plantillas en las páginas de inicio de LP Store
Si recuerdas viejos juegos de computadora en los que el personaje principal movido a través de una variedad de mazmorras o junglas bidimensionales, entonces tienes una idea de lo que es un efecto de paralaje artificial. Para agregar realismo (si podemos hablar de esto en un juego bidimensional), el desarrollador del juego Moon Patrol en 1982, y luego grandes gigantes como Nintendo y Konami comenzaron a mover la capa de fondo a una velocidad más lenta que la del héroe. . Así, se simuló el efecto de "profundidad" inherente al movimiento real.
Moon Patrol es la primera aplicación informática de paralaje:
Cuando conduce un automóvil, los objetos cercanos y lejanos se mueven visualmente a diferentes velocidades debido al hecho de que provienen de diferentes ángulos de visión. A esto se le llama efecto de paralaje.
A pesar de su relativa sencillez, el paralaje hace que cualquier imagen en movimiento sea mucho más eficaz y bonita, como si añadiera una tercera dimensión, por lo que su aplicación en el diseño web era solo cuestión de tiempo. ¿Qué hace el usuario cuando navega por el sitio web? Lo hojea (se desplaza), es decir, realiza algunos movimiento que se puede utilizar para paralaje.
La primera empresa en utilizar este efecto notable fue Nike; a pesar de cierta pesadez, la corporación deportiva sorprendió a todos con su novedad en ese momento. Fue pesado debido al hecho de que el paralaje se creó allí usando javascript.
Con la llegada de tecnologías como CSS3 y HTML5, fue posible hacer paralaje casi sin ninguna dificultad, sin sobrecargar la página con un código engorroso. Complementos más utilizados jQuery y CSS... Los elementos de la página están divididos en capas, y la última ya está expuesta a la respuesta deseada al desplazamiento de desplazamiento.
Dado que el desplazamiento de página se puede organizar en diferentes direcciones, los sitios de desplazamiento de paralaje se pueden dividir en varios tipos.
Tipos de sitios de desplazamiento de paralaje
1. Desplazamiento de paralaje vertical
El tipo de sitio más popular, en el que el paralaje se logra moviéndose a lo largo del eje X. Este método es intuitivo para usuarios de PC y Mac, pero el paralaje vertical, aunque da algo de profundidad y "anima" la página, no lo hace para la misma extensión que y horizontal. ¿Por qué? Piense en el plano en el que una persona está acostumbrada a moverse y ¿qué tipo de paralaje debería haberse desarrollado con más fuerza en él para ayudar a estimar las distancias a los objetos? Es por eso
2. Desplazamiento de paralaje horizontal
le permite crear un efecto 3D completo en el sitio sin utilizar modelos tridimensionales. Un excelente ejemplo de un diseño preestablecido de este tipo es nuevamente de Nintendo: observe que el contenido principal no se mueve en el plano más cercano. La toma más cercana pertenece a una capa con pequeños elementos que se mueven a una velocidad mucho más rápida que la velocidad del desplazamiento, agregando un efecto "fuera de pantalla". Sin embargo, debe tenerse en cuenta que voltear el sitio horizontalmente es más fácil en tabletas, no en PC. Pero no todo el mundo navegador móvil podrá extraer código jQuery complejo, por lo que para plataformas móviles se recomienda hacer una versión simplificada sin paralaje.
3. Paralaje bidimensional
Es incluso más fácil implementar este efecto y, al mismo tiempo, funcionará incluso sin desplazarse ni voltear. ¿Cómo? Entre muchos otros, nuestra corteza visual tiene otro "error": percibimos más objetos borrosos como "desenfocados" y, por lo tanto, más o más cerca del espectador. Sabiendo esto, y aplicando desenfoque a algunos de los elementos, por ejemplo, al fondo, puede crear la ilusión de tridimensionalidad incluso en un sitio web de una sola pantalla.
Un ejemplo de cómo simular el paralaje:
Sin embargo, basta de teoría, veamos qué es con ejemplos.
Los mejores ejemplos de páginas de una página de paralaje
1. "El camino de Laurentiis"
El sitio del proyecto social para el desarrollo de Laurentiis en los Países Bajos es un excelente ejemplo de cómo el efecto de paralaje puede integrarse en otro contenido que llame la atención. Junto con las diversas capas que se desplazan horizontalmente, también puede encontrar elementos que se mueven simplemente (mariposas), gráficos, patrones de color que cambian en una relación compleja con otras imágenes. Vea la variedad de ideas creativas de los diseñadores.
2. Refrescos Lipton
Un buen ejemplo de cómo se puede utilizar el paralaje con moderación para llamar la atención sobre lo más importante. En la parte superior de esta página de destino, se usa una diapositiva de animación en lugar de paralaje, luego aparece el título, moviéndose un poco más rápido que el resto de la página; esta es la propuesta de valor principal. Finalmente, verá un carrusel de paralaje horizontal que muestra varios cócteles de té Lipton.
3. Studio Reverend Design
El estudio de diseño interactivo nos lleva a los orígenes del paralaje informático, en la era de los juegos de ocho bits. En este caso, el paralaje no “se cubre a sí mismo”, como es el caso de los diseñadores entusiastas que confían en una característica en particular. No - el efecto simplemente da vida a otros elementos. Sin embargo, un buen estudio de diseño no puede ser de otra manera.
4. Sitio web de la película Art of Flight
El diseño de este sitio no encaja en nuestra clasificación exacta de desplazamiento de paralaje, porque a medida que se mueve, da un giro brusco, casi lo mismo que los héroes de esta película deportiva en sus acrobacias impensables. ¿Y quién dijo que esto no está permitido?
5. Página de destino de Spotify
Un excelente ejemplo de un diseño que ya ha encontrado numerosos imitadores. El paralaje se logra con toboganes de ancho completo que se mueven a diferentes velocidades. Elegante y eficaz.
6. Tarjeta de visita interactiva iutopi
¿Qué mejor manera de obtener una tarjeta de presentación de estudio web que los impresionantes efectos especiales? El estudio Iutopi te sumerge en un océano de dibujos animados lleno de hermosas criaturas y varios elementos que se mueven en diferentes ángulos de paralaje.
7. Servicio social Hashtago
Y en este ejemplo, el paralaje vertical y bidimensional se combinan con éxito: el fondo no se mueve y se desenfoca para maximizar el enfoque en el primer plano en movimiento, que contiene información clave para los visitantes.
En conclusión, digamos, no importa qué efecto atractivo use, no se olvide del objetivo principal de una página de destino de una página: generar conversión. Si el usuario no realiza la acción deseada, sus esfuerzos con la interactividad son inútiles. Sin embargo, los efectos vívidos hacen que las personas recuerden su sitio y su marca, lo que puede ser muy útil más adelante, en un ángulo de paralaje diferente.
| 29.09.2014
¡Buenas tardes queridos lectores! Nuestra calificación de hoy, que consta de 10 lugares, está dedicada a sitios inusuales. Los sitios de esta lista TOP-10 tienen una cosa en común: el efecto de paralaje.
Especialmente para aquellos que aún no son conscientes de qué es, hablaremos brevemente de este efecto, que ya ha comenzado a cobrar impulso y se está volviendo cada vez más popular en el campo del diseño web.
Entonces, el efecto de paralaje, o desplazamiento de paralaje, es una técnica especial en la que los objetos en el fondo en perspectiva se mueven más lentamente que los objetos en primer plano. Debido a esto, se crea un efecto 3D, aparece una sensación de espacio tridimensional. El desplazamiento Parallax es una excelente manera de agregar sabor a un sitio de una página, darle vida a las infografías, contar una historia o exhibir un portafolio. Y algunas de las obras de los diseñadores modernos se pueden llamar con seguridad obras de arte ... Sin embargo, es mejor verlas una vez que escucharlas cien veces: consulte nuestros sitios TOP-10 y ¡compruébelo usted mismo!
Nota: Algunos sitios de desplazamiento de paralaje pueden consumir muchos recursos debido a una variedad de efectos, por lo que es posible "desacelerar" en ciertas computadoras y dispositivos portátiles.
Agarra y listo
El décimo lugar en nuestra calificación lo ocupa el sitio Grab & Go, donde se utiliza el efecto de paralaje para decorar y animar la imagen. A medida que mueve el cursor, puede ver casas y árboles moviéndose en el fondo al mismo tiempo. De acuerdo, debido a este entusiasmo, existe la posibilidad de que el visitante recuerde mejor el sitio.
Manos Digitales
En el puesto número 9, DigitalHands también usa paralaje para que se destaque maravillosamente y sea recordado por los visitantes. Mueva el cursor del mouse y disfrute del efecto especial.
Madwell
La agencia creativa Madwell, con sede en Nueva York, exhibe su portafolio en la página de inicio del sitio, utilizando hábilmente el efecto de paralaje. La sensación 3D no abandona al usuario durante todo el tiempo de desplazamiento.
Oakley
Cualquier producto necesita una correcta presentación. La tienda Oakley utiliza el desplazamiento de paralaje para mostrar los beneficios de las gafas Airbrake MX. Resultó bastante impresionante e informativo, ya que los productos se pueden ver y estudiar desde todos los lados, simplemente usando el pergamino.
Haga que su dinero importe
Pocas personas no se preocupan por las finanzas personales. El sitio Make Your Money Matter, que ocupó el sexto lugar en nuestra calificación, de forma accesible revela a los espectadores las ventajas de una cooperativa de crédito y habla sobre las desventajas de los bancos. Aquí puede utilizar una calculadora que le mostrará cuántos beneficios obtienen los bancos de las inversiones de los clientes, así como buscar sucursales de cooperativas de crédito por código postal.
Aguja Espacial
¿Le gustaría explorar Seattle desde 184 metros? El sitio web de Space Needle lo llevará a un recorrido virtual por el monumento más reconocible de la ciudad: la Torre Space Needle, que significa "aguja espacial" en inglés. Esta torre mide 184 m de alto, 42 m de ancho y pesa 9.550 toneladas y resiste huracanes con velocidades de viento de hasta 320 km / hy terremotos de hasta 9.1 puntos. Además, la torre cuenta con 25 pararrayos. Una característica distintiva del Space Needle es una plataforma de observación a una altitud de 159 metros, un restaurante SkyCity y una tienda de regalos. Desde su cima, puede ver el centro de Seattle, Mount Rainier, las montañas Cascade, Eliot Bay y las islas circundantes.
Peugeot Hybrid4 - Novela gráfica
El mayor fabricante de automóviles francés, Peugeot, presentó el sistema de propulsión híbrida Hybrid4 de una manera bastante extraordinaria. Se abre ante nuestros ojos una emocionante tira cómica (que, por cierto, se puede configurar para que se reproduzca automáticamente), donde la tarea del personaje principal es obtener datos secretos y marcharse sin meterse en problemas. Para completar con éxito la operación, se ve obligada a cambiar entre cuatro modos de conducción diferentes que imitan la tecnología Peugeot Hybrid4: máxima productividad y dinamismo (Sport), tracción total y tracción máxima (4WD), equilibrio entre rendimiento y economía (Auto), funcionamiento silencioso (ZEV).
Los muertos vivientes
Entonces, llegamos al tercer lugar en nuestra lista de sitios TOP, que fue para el proyecto The Walking Dead. El sitio, que atrajo a muchos fanáticos de The Walking Dead en primer lugar, utilizó HTML5, CSS3, JavaScript y, por supuesto, efecto de paralaje. Los desarrolladores han hecho un gran trabajo al hacer que todas estas tecnologías funcionen juntas y en todas las plataformas. Al llegar al sitio y comenzar a desplazarse, el usuario ve una historia cómica sobre cómo convertir a los actores en zombis.
Un proyecto único e irrepetible, que forma parte de la campaña “Be Moved” de Sony, impresiona por su volumen, dinámica y atención hasta el más mínimo detalle. Probablemente no haya mejor presentación de producto que Sony. Las palabras son superfluas, simplemente desplácese hacia abajo y ¡disfrútelo!
Plano vs. Realismo
Y finalmente, llegamos al primer lugar en nuestro ranking, que fue tomado por el sitio Flat vs. El realismo es una creación de la agencia interactiva inTacto. Este proyecto de Año Nuevo con gráficos espectaculares (¡y acompañamiento musical!) Es un minijuego del género de lucha con un trasfondo interesante, donde hay un enfrentamiento entre representantes de dos tipos de diseño: realista y plano. Centrándose en el holívar principal de finales de 2013 - principios de 2014, los creadores no perdieron: después del lanzamiento, este impresionante trabajo causó sensación instantáneamente y se convirtió en un tema de discusión popular en blogs y noticias.
Los desarrolladores del sitio lograron combinar el desplazamiento de paralaje y el juego HTML5. “Queríamos asegurarnos de que a medida que recorre el sitio de principio a fin, todo sucede sin problemas y sin demoras. Para ello utilizamos AJAX, lo que nos permitió actualizar los datos en segundo plano ”, explicó el director creativo de la agencia Alejandro Lazos. El proyecto se presentó a la audiencia a finales de 2013, antes del Año Nuevo. Prepárate para girar el desplazamiento, ¡te espera mucha diversión!
No tiene sentido describir la física de la percepción óptica: la mirada de la persona desde el retrato se mueve según la posición del espectador que mira este retrato desde varios puntos espaciales. Intente dar a esto una explicación clara en palabras accesibles. Lo mismo sucede con el paralaje: describir las propiedades de una ilusión óptica no explica nada, pero intentémoslo. El efecto se expresa en un cambio en la ubicación espacial de un objeto cercano, caracterizado por su desplazamiento asimétrico con respecto a una referencia de coordenadas más distante, que se percibe subjetivamente desde la ubicación del espectador. ¡Algo como esto! El tercer ojo, después de limpiar los chakras y restaurar el aura, fuma nerviosamente al margen.
Entendamos en orden: es mejor comprender una vez que estar en la oscuridad cien veces.
Paralaje en la vida y en una página de destino de venta
Nada se puede explicar con ejemplos, pero todo se puede ilustrar. Imagínese en un automóvil en movimiento. Los puntos de referencia de la carretera (pilares de kilómetros, árboles, edificios) parpadean detrás del vidrio lateral. Cada uno de ellos se encuentra a una distancia diferente del automóvil y, por lo tanto, desaparece de su campo de visión a diferentes velocidades. Los objetos cercanos a la carretera se mueven visualmente más rápido y los objetos distantes más lentamente. Al mismo tiempo, el bosque ubicado en la línea del horizonte prácticamente no se mueve. Todo, puedes acabar con esto en la explicación de la física del paralaje.
Con respecto al diseño del sitio (por ejemplo, una página de destino de venta), todo se ve exactamente igual. Solo el volumen se realiza mediante visualización gráfica- sombras, tamaños, visibilidad. Los elementos que se encuentran visualmente más cerca del usuario se mueven más rápido que los que se encuentran a distancia. Esto se logra superponiendo capas de estructura gráfica, cada una con propiedades individuales. El efecto se aplica de dos formas.
- El movimiento de paralaje se inicia moviendo el cursor del mouse. En este caso, incrustado en segundo plano objetos gráficos comenzar a "bailar" - para realizar movimientos programados, agregando variedad volumétrica de fondo.
- El efecto de paralaje se produce cuando se desplaza: desplazamiento vertical de la página de un sitio. En este caso, la práctica de introducir gráficos que aparecen al pasar a cada nueva pantalla de aterrizaje. La visualización ilumina la monotonía mecánica del proceso y enfatiza la integridad de las transiciones.
Parallax apoya el concepto de sitio
La introducción del efecto de paralaje en la página de destino es una forma de aumentar el atractivo visual de un recurso y de distinguirlo de varias ofertas de Internet de la competencia. Por otro lado, solución de software ralentiza los tiempos de carga de la página, interactúa caprichosamente con plataformas móviles y, como resultado, responde negativamente a la promoción del sitio web. Independientemente de lo que se diga, la clasificación en la búsqueda es un aspecto importante de la página de venta.
Y, sin embargo, no saquemos conclusiones apresuradas, veamos el concepto de la solución de diseño implementada en su sitio web. Parallax no es un fin en sí mismo, sino una adición que debe encajar orgánicamente en el esquema estilístico del recurso. Solo si se guía por este principio, podrá determinar si se necesita paralaje en la página de destino o si su implementación distraerá a los visitantes, alterará el equilibrio de la estructura y romperá la percepción general de la imagen completa.
Con la aparición y el uso generalizado de HTML5 (un nuevo estándar para estructurar y presentar contenido en la World Wide Web) y CSS3 (una versión mejorada del lenguaje para describir la apariencia de los objetos), se hizo posible crear un diseño más interesante y memorable. elementos para todas, sin excepción, las páginas de Internet, incluidas, por supuesto, y las páginas de destino.
¿De qué lado estás?
Con la ayuda de gigantes como Microsoft, Google y Apple, el diseño plano se convirtió en un abrir y cerrar de ojos en el éxito de la temporada y en el tema de discusión en cientos de noticias y blogs. Se percibió como una especie de gran avance en el campo del diseño web y, muy probablemente, realmente lo fue. La agencia interactiva intacta decidió llamar la atención de sus clientes sobre esta etapa bastante inusual en el desarrollo del diseño virtual y preparó un viaje interactivo, dándole el título “Diseño plano versus realismo”. Todo esto fue creado, por supuesto, no sin la ayuda del efecto de desplazamiento de paralaje.
El director creativo de la agencia, Alejandro Lazos, explica que lo más desafiante fue combinar un juego HTML5 con desplazamiento de paralaje.
“Queríamos que toda la acción ocurriera de forma continua para que los usuarios pudieran moverse de principio a fin sin detenerse. Para ello, utilizamos la tecnología ajax, que permitió transferir datos a través de la url y actualizar los datos en segundo plano, proporcionando al usuario la página adecuada sin demora ".
Parallax scrolling de Sony: ¡nunca has visto nada como esto!
Probablemente nadie en el mundo sepa cómo presentar sus productos como lo hace Sony. La página de destino presentada es parte de la campaña "Be Moved" de Sony, sobre la cual dicen lo siguiente:
“De alguna manera nos llamaron conejillos de indias, porque todas las innovaciones que presentamos son adoptadas inmediatamente por empresas competidoras. Querían hacernos daño, pero lo tomamos como un cumplido. La colaboración de artistas e ingenieros es siempre un experimento, pero solo en este caso puedes esperar que mañana des un paso adelante ”.
Graphite Digital eligió las ilustraciones que representan de manera más expresiva los productos de la empresa
Esta impresionante página de una página es una creación de la agencia Graphite Digital de Brighton. En el pasado reciente, la agencia tuvo la tarea de presentar el producto de Costa Coffee de una manera brillante e interesante.
El resultado del trabajo merece todos los elogios. La página de destino parece lujosa y está repleta de todo tipo de elementos interactivos e ilustraciones animadas.
El gran peso de la imagen resultó ser el mayor problema para los desarrolladores
Este impresionante micrositio, diseñado por la agencia de Newcastle Shout Digital para la agencia de viajes Exsus, una compañía de vacaciones de lujo y luna de miel, es otro gran ejemplo de este tema. Su animación de estilo retro capta instantáneamente tu atención y nunca la suelta hasta los créditos finales.
Conduce un Cadillac Eldorado clásico de 1959 que te lleva a todos los lugares famosos de la costa de California. A primera vista, todos los efectos parecen simples, pero una vez que comienzas a desplazarte, la verdadera magia se abrirá frente a ti.
Administre sus finanzas de la forma en que Make Your Money Matter aconseja
Mucha gente está interesada en el tema del dinero y las finanzas personales, por lo que la agencia digital neoyorquina Firstborn, al preparar un pedido para una cooperativa de crédito, prefirió uno innovador al formato tradicional.
Con el objetivo de concienciar al público objetivo sobre los beneficios de una cooperativa de ahorro y crédito (y las desventajas de los bancos), los especialistas en marketing han creado un aterrizaje increíble en una forma accesible e interesante que explica cómo funciona una cooperativa de ahorro y crédito, dónde encontrar las oficinas de una organización. , y mucho más. Además, existe una calculadora que calculará el beneficio que reciben los bancos de sus inversiones.
La página de destino le mostrará todos los tipos de bicicletas existentes.
Los sabios chinos dicen: "Eres lo que comes". Bueno, para los diseñadores y amantes de las grandes bicicletas Romain Bourdieux y Thomas Pomarelle, esta famosa sabiduría suena como "Eres lo que conduces". Su sitio web en coautoría lo sorprenderá no solo con el moderno efecto de desplazamiento de paralaje, sino también con un gran sentido del humor e ilustraciones de primer nivel.
Los desarrolladores, al parecer, no se perdieron ni un solo tipo de bicicleta y trataron de enseñarles de tal manera que cada visitante estuviera ansioso por comprar una y unirse a la subcultura multimillonaria.
Puedes probar el coche mientras te quedas en casa en tu cómoda silla
Gracias a este sitio, puede probar un nuevo modelo de la gama Lexus sin salir de casa. El video interactivo desarrollado por la agencia de consultoría digital Amaze le proporcionará información completa y altamente visual sobre el interior y el exterior del automóvil Lexus IS. El efecto de la presencia está asegurado.
Para lograr este resultado, el equipo de marketing necesitaba capturar el automóvil con el telón de fondo de una variedad de paisajes y escanear la vista circundante en cada uno de los puntos clave. Gracias a la tecnología HTML5, la página de destino funciona tanto en computadoras como en teléfonos inteligentes, lo que hace que la promoción de automóviles sea más exitosa que nunca.
Wendy Stonefield, directora comercial de Amaze, señala: “El uso de HTML5 nos ha permitido alcanzar varios objetivos. En primer lugar, es una muestra visual del automóvil y sus características funcionales. En segundo lugar, este es un momento interactivo, sin el cual ningún proyecto moderno puede hacerlo: en nuestro caso, permitimos a los usuarios elegir el color del interior y la carrocería del automóvil. Al crear el video, nos enfocamos en el espectador sofisticado, y con las tecnologías que existen hoy, esto se ha vuelto más que posible. Mostramos el Lexus IS como realmente es ".
Life in my Shoes (del inglés, a través de los ojos de otra persona) es un proyecto ambicioso, cuyo principal objetivo es erradicar el miedo y los prejuicios contra las personas seropositivas y concienciar a las generaciones más jóvenes sobre el VIH y el sida. La agencia Traffic, con sede en Londres, tenía la tarea de diseñar una página de destino que captara la atención de una audiencia joven y se ganara su confianza, e hicieron un gran trabajo con ella.
La fuente corporativa Houshka Rounded Medium se ha implementado con soporte para la sintaxis de tipografía, lo que hace que la página parezca más viva e interesante. Otros elementos decorativos junto con el uso del amarillo hicieron que el recurso fuera estéticamente agradable.
La nueva página de inicio del famoso cantante de folk recita poesía y los acompaña con imágenes increíbles
Para promocionar el nuevo álbum de Laura Marling, A Creature I Don't Know, la agencia digital con sede en Londres Studio Juice ha desarrollado una increíble página de inicio que lee poesía, acompañada de exquisitas ilustraciones y animaciones expresivas.
Para crear tal milagro, se utilizaron nuevos elementos semánticos y atributos, gracias a los cuales las animaciones se sincronizan con la banda sonora y su velocidad coincide con los parámetros especificados anteriormente.
Alzheimer's Research, la agencia líder en el Reino Unido para la enfermedad de Alzheimer, se compromete a comunicar su trabajo y sus resultados de una manera divertida y accesible. Para ello, se creó el recurso The Lab.
En la página, cada usuario tiene la oportunidad de familiarizarse con los laboratorios y la clínica de la institución, y los consejos emergentes de forma concisa explican lo que se muestra en la pantalla. Si hace clic en cualquiera de ellos, obtendrá información más detallada. La demostración de cómo los científicos dan vida a sus teorías y dan esperanza a millones de personas está en su mejor momento.
Infografías sobre infografías!
NeoMam Studios presentó una excelente página de inicio de desplazamiento de paralaje que destaca las principales ventajas de la infografía como método de presentación de información.
"El desplazamiento de Parallax es lo más difícil que tienen que implementar nuestros desarrolladores", dice Danny Ashton, director de la empresa. "Pensaron que todas las bibliotecas disponibles eran triviales, por lo que crearon las suyas propias".
La característica principal de este recurso es que cada una de sus páginas está dotada de su propio mecanismo de desplazamiento. ¡Cada uno! Este es un enfoque muy divertido y muy exitoso para la implementación de la idea del desplazamiento de paralaje, que también demuestra que esta tecnología le permite inventar formas ingeniosas de presentación de información.
El desplazamiento de Parallax aquí no funciona tanto para el entretenimiento como para la trama.
Esta infografía en línea fue desarrollada por Frank Chimero, quien usó el desplazamiento de paralaje no solo para presentar información de manera más eficiente, sino también para animarla y encajarla en una historia específica. ¡Acrobacia aérea!
¡Aprenda sobre el problema global de la falta de agua potable!
El estudio de animación Nice & Serious diseñó esta página de destino utilizando el desplazamiento de paralaje para concienciar al público sobre la falta de agua potable en el planeta. ¿Dónde gastamos el agua? ¿Dónde podríamos guardarlo? ¿Cómo hacerlo? Aprenderás todo sobre este problema. Hasta la última gota.
La agencia digital Tribal se encargó de actualizar la representación en línea de la agencia de traducción Living Word y hacerla informativa e interesante. Puede admirar el resultado usted mismo, pero digamos de inmediato que a los británicos no se les ocurrió nada inusual, pero lo hicieron todo de manera ordenada y limpia.
El desplazamiento Parallax agrega profundidad a las páginas de destino de Madwell
La agencia de desarrollo empresarial con sede en Nueva York, Madwell, utiliza una página de destino para presentar su cartera. El desplazamiento de Parallax es una especie de entusiasmo en la acción que organizan: el efecto 3D resultante agrega profundidad a su creación.
El Jacksonville Downtown Art Walk es un evento tradicional de arte y cultura mensual en Jacksonville, Florida. El festival se extiende a lo largo de 15 cuadras y se compone de docenas de galerías, museos y bares. Todo ello acompañado de actores y músicos callejeros. Un hermoso sitio web de paralaje de acuarela sobre este evento también puede traer un estado de ánimo alegre a su hogar.
La marca de moda Von Dutch cuenta la increíble historia de vida de su fundador desde las páginas de su sitio web. Sin lugar a dudas, para estar en tendencia, se utilizó el novedoso efecto de desplazamiento de paralaje. A medida que se desplaza por la página, las imágenes y los iconos flotan hacia arriba y hacia abajo, dando la impresión de que alguien ha vertido agua en su monitor mientras no estaba.
Fanabee es una página de destino creada no tanto para los amantes de la música, sino para los que la coleccionan. Con este servicio, puede publicar una lista de lo que ha recopilado (CD, carteles, camisetas, etc.) y encontrar lo que se está perdiendo.
Las nuevas tecnologías deben presentarse de una manera nueva, ¿verdad?
La tira cómica online, encargada por el gigante automovilístico Peugeot (Peugeot), permite a la empresa realizar dos tareas a la vez: en primer lugar, presenta de forma bastante eficaz el nuevo mecanismo de Peugeot Hybrid4 a la atención del público objetivo y, en segundo lugar, funciona. en la imagen tanto del producto como de la propia empresa: unirse a Peugeot, que experimenta audazmente con los formatos y no se olvida de su individualidad, será ahora aún más prestigioso.
Cultural Solutions es una agencia de consultoría que, como su nombre indica, se ocupa de temas relacionados con el arte. El logotipo de la empresa consta de círculos multicolores superpuestos entre sí. Es por eso que en la página principal del sitio estos círculos se reproducen con la ayuda del efecto de paralaje. Los círculos se mueven a diferentes velocidades y esto agrega profundidad y volumen. El resultado es una declaración lacónica, pero muy espaciosa y elegante.
Los desarrolladores del sitio web de jQuery Conference no se olvidan de lo principal: mantienen el equilibrio adecuado entre el contenido de la información y la vistosidad.
El sitio, creado específicamente para la conferencia jQuery, tiene un ligero efecto de paralaje, pero está ejecutado con ficción. A medida que te desplazas hacia abajo en la página, comienzas una cadena de diferentes animaciones: una bicicleta viajando de izquierda a derecha o una bandada de gaviotas persiguiendo a un tiburón. En general, es original y no está sobrecargado de efectos: después de todo, lo principal no es solo sorprender, sino también ser escuchado.
La agencia creativa Shape en su página de inicio de forma bastante lacónica habla sobre las principales etapas de sus actividades. Las animaciones agregan claridad y, junto con el desplazamiento de paralaje, todo tiene un efecto visual agradable.
Con el fin de presentar al público objetivo la nueva serie de juegos de Mario Kart, una reconocida empresa japonesa ha desarrollado una página de destino que, utilizando el efecto de desplazamiento de paralaje, relata el juego en el formato de un pequeño viaje alrededor de su mundo. El diseño de la página de destino y su combinación de colores copia el estilo del juego y, a lo largo del camino, conocerás personajes familiares de la infancia.
Simplemente desenrosque la tapa y comenzará la acción.
La empresa Activate Drinks se dedica a la distribución de bebidas fortificadas, y para promocionar sus productos ha desarrollado un recurso que es relevante en todos los aspectos. Primero desenroscas la tapa de la botella (desplazándote por la página, por supuesto), y luego te encuentras en un torbellino de burbujas rápidas. Tres niveles de colocación de burbujas, junto con el efecto de paralaje, crean un efecto 3D y pronto la sensación de salpicaduras del monitor.
El desplazamiento Parallax se utiliza no solo para mejorar el lado estético de la campaña, sino, en el caso del gobierno de los EE. UU., Para agregar significado y emoción a la página. Puede notar que todo el contenido se desplaza mucho más rápido que las imágenes subyacentes. Esto se hace a propósito para mantener la atención del lector precisamente en estas ilustraciones, que tienen un impacto en las emociones de los visitantes.
El renombrado sitio de música Pitchfork ha causado un gran revuelo con el ambicioso proyecto Cover Stories. El recurso de Internet adquirió algunas de las características de una revista impresa brillante, pero el uso del efecto de paralaje, videos interactivos, entrevistas y fotografías únicas lo hizo diferente a cualquier otra cosa. Fotos de retratos animados, texto conmovedor y una banda sonora perfectamente combinada, muy elocuente y exquisita.
Cautivante minimalismo de los franceses de Soleil Noir
Esta peculiar página de destino diseñada por los franceses de Soleil Noir no es más que una tarjeta de Año Nuevo. Aquí no encontrarás nada complicado: vertiginoso desplazamiento de paralaje, minimalismo en las ilustraciones, frases lacónicas, pero esta simplicidad cautiva.
Oakley combina un impresionante desplazamiento de paralaje con una fotografía expresiva
Oakley es un proveedor reconocido de gafas protectoras y antiparras, y este recurso se ha desarrollado específicamente para promocionar el nuevo modelo de gafas Airbrake MX. La página de destino combina un impresionante desplazamiento de paralaje con fotografías expresivas que presentan a la perfección el producto.
Página de destino del tres veces campeón olímpico y dos veces campeón mundial de carreras de ciclismo Jason Kenny
A principios de este año, la agencia de marketing de Bristol Fiasco Design diseñó esta increíble página de aterrizaje para el 3 veces campeón olímpico y el 2 veces campeón mundial de ciclismo Jason Kenny. El cofundador de la agencia, Ben Steers, afirma: "Basándonos en los términos de referencia, decidimos crear un sitio de una página con desplazamiento vertical y efecto de paralaje".
La barra de navegación le permitirá moverse rápida y fácilmente al área deseada de la página.
Entre un número creciente de páginas de destino que utilizan la posición de la barra de desplazamiento para activar animaciones y efectos de sonido, la creación de la agencia francesa La Moulade destaca por su indicador altamente inusual de su posición en la página. Está ubicado en la parte superior y también le da acceso a cualquier parte del sitio.
Lo más difícil es combinar los logros de todas las tecnologías.
“En primer lugar, somos fanáticos de este programa”, comenta el diseñador jefe Gavin Beck, que comparte sus impresiones sobre el proyecto. “Nuestro plan era crear un sitio web que coincidiera con el mundo de The Walking Dead, que los fanáticos de la serie apreciarían y estudiarían. Para lograr nuestros objetivos, necesitábamos utilizar nuevos desarrollos como HTML5, CSS3, JavaScript / jQuery, Web Audio / HTML5 Audio y, por supuesto, desplazamiento de paralaje. El mayor desafío fue lograr que todas estas tecnologías funcionaran juntas y estuvieran disponibles en todo tipo de plataformas ".
¿Podría ser este el futuro del periodismo online?
En una era en la que la gente no se carga con la lectura de periódicos y revistas, muchos periodistas se preguntan cómo atraer la atención de la audiencia hacia la palabra impresa. Una de las opciones para superar la crisis fue propuesta por el periódico estadounidense The New York Times, que ha desarrollado una nueva forma de presentación de artículos e historias de revistas: un sitio de una página creado con los últimos avances en el campo del diseño web y decorado con ilustraciones de Atilla Futaki.
Tan pronto como comiences a desplazarte por la página, las ilustraciones se moverán y te sumergirán en la acción descrita.
Nada complicado, parece, pero parece bastante entretenido.
Independientemente de si se trata de una institución de salud pública o privada, los líderes de estas organizaciones están cada vez más preocupados por el creciente volumen de pagos de compensación. La infografía presentada revela exactamente este problema, pero atrae la atención sobre sí misma con el efecto de desplazamiento de paralaje.
Tan pronto como se desplace hacia abajo en la página de destino, aparecerá un profesional de la salud en la pantalla, caminando por el pasillo y empujando una camilla frente a él. Se mueve de una sección a otra, cada una de las cuales representa un año específico en la historia del Sistema Nacional de Salud del Reino Unido. Las ventanas emergentes le mostrarán cuáles fueron los mayores pagos de compensación en estos años. Nada complicado, al parecer, pero parece bastante entretenido.
Un empleado de la agencia que desarrolló esta página de destino comparte sus impresiones del trabajo: “Para crear este sitio, aplicamos nuevas tecnologías en HTML5, CSS3 y JavaScript. Dado que las animaciones son el elemento clave aquí, usamos principalmente las bibliotecas de animación "skrollr". Hemos dibujado cada elemento a mano y hemos añadido los toques finales con compatibilidad con CSS3 ".
Juego perfecto de desplazamiento sin fin y efecto de paralaje.
Este recurso fue creado por la agencia noruega Unfold y es un ejemplo de una combinación de efectos como el desplazamiento sin fin y el desplazamiento de paralaje. La barra de navegación, oculta en la esquina superior derecha, siempre le dará una idea de dónde se encuentra en el sitio y le permitirá moverse rápidamente al área de su interés, y si se desplaza hasta el final de el sitio, notará que la barra de desplazamiento se moverá automáticamente hacia arriba y continuará desplazándose por el sitio nuevamente, desde el principio.
Para crear esta página de destino, los desarrolladores utilizaron el complemento skrollr.js, por lo que los visitantes pudieron "desplazarse" por los eventos de la página. Esto permite una alta velocidad de modelado, lo que permite más tiempo para suavizar las transiciones y crear una interfaz de usuario potente. La tecnología CSS 3D se ha utilizado para crear animaciones.
Conclusión
El mundo no se detiene, y cada día surgen nuevas obras de arte en el campo del diseño web. ¿Estarás entre estos héroes? Es fácil si adopta estas excelentes tecnologías. Pero no te olvides de lo principal: ¡cualquier efecto incrustado debería aumentar la conversión! De lo contrario, simplemente no lo necesita.