Desplazamiento de paralaje vertical.

Cada año vemos el surgimiento y desaparición de diferentes tendencias en diseño web. Y a veces sucede que cierto "chip" después de un tiempo comienza a usarse nuevamente en todas partes.

En 2012, muchos sitios extranjeros utilizaron un efecto muy interesante tomado de los juegos: el desplazamiento de paralaje. En general, era la época de la moda 3D, por lo que intentaron hacer sitios web tridimensionales y de varias capas.

Después de uno o dos años, el paralaje se olvidó de alguna manera, y aquellos sitios que eran ejemplos vívidos de su uso sobrevivieron a un rediseño, optando por otras técnicas visuales. Hoy este efecto está experimentando un renacimiento y se vuelve a hablar de él.

Recordemos también qué es, dónde aplicarlo y cómo, y también consideremos algunos ejemplos llamativos usando paralaje.

Desplazamiento de paralaje: ¿qué bestia?

Es muy fácil reconocer el efecto de paralaje en los sitios web: se utilizan varios fondos que parecen moverse a diferentes velocidades para crear una sensación de profundidad (creando un efecto 3D artificial). Esta técnica se utilizó en su totalidad en juegos de "estilo antiguo" y también es una tendencia interesante en el diseño web.

El término proviene del griego "Parallaxis" que significa "cambio". Hoy, esta tendencia está volviendo a abrirse camino en el mundo del diseño web.

El desplazamiento de Parallax puede ser estándar, vertical u horizontal, y con cambios de dirección.

Este es un concepto de diseño muy interesante que se ve simplemente increíble, pero al mismo tiempo requiere mucho trabajo minucioso. Es necesario no solo pensar en la implementación, sino también trabajar bien en la optimización; de lo contrario, en dispositivos móviles o en pantallas grandes las capas pueden ralentizarse y no solo decorarán, sino que simplemente desfigurarán su creación.

Al aplicar paralaje, intente no cometer un error importante, que a menudo se encuentra en dichos sitios: la capa principal tiene una velocidad de movimiento muy alta y, como resultado, el usuario normalmente no puede ver la información o las fotos. Giró un poco el volante, y la foto o el texto ya habían bajado mucho, trató de devolverlo, todo estaba oculto. Como por ejemplo. En la etapa de optimización, preste atención a la velocidad de desplazamiento de las capas, la principal debería, idealmente, moverse a la misma velocidad que la barra de desplazamiento. Pero con el resto de elementos que sirven de decoración, puedes jugar con seguridad.

¿Dónde aplicar?

El desplazamiento Parallax se ve muy bien en sitios con poco contenido. Esta es una solución ideal para sitios web de una página, sitios de tarjetas de visita.

Digamos que solo tiene una breve información sobre la empresa, contactos y algunas fotos. Un sitio simple con tal contenido se verá aburrido y poco interesante. Pero si agregamos aquí efectos inusuales como el paralaje: los usuarios recordarán este recurso durante mucho tiempo.

En realidad, es muy difícil llamar la atención de la gente en este momento. Muchos sitios están llenos de efectos flash, superposiciones de sonido y otros "chips" inusuales. Todos intentan destacarse lo mejor que pueden, por eso los diseñadores comenzaron a volver al paralaje nuevamente.

Este efecto también es adecuado para páginas de una página que presentan un producto o una línea de productos. Habiendo pensado en el concepto, puedes hacer algo realmente único.

Algunos ejemplos

Pasemos ahora de la teoría a la práctica y consideremos varios sitios que utilizan el desplazamiento de paralaje. Quizás en esta colección encuentres inspiración o encuentres algunas ideas originales.

Antes que usted - el catálogo original de zapatos, que, además de paralaje, utiliza otro. Juntas, estas técnicas crean una atmósfera especial.

La página, como puede ver, se mueve a una velocidad y las formas geométricas a la otra, un poco más lento.

Aquí nuevamente, el paralaje va de la mano con el sonido y ayuda a contar toda la historia. Además del efecto 3D, también vemos otras tendencias de la moda aquí: colores blanco y negro, dibujos a mano alzada, fuentes escritas a mano. Si eres demasiado vago para girar la rueda, activa el desplazamiento automático y disfruta.

¡Bienvenidos a Milán! ¡Sumérjase en el mundo del arte italiano!

Aquí vemos otra solución inusual: para ver el sitio, no es necesario girar la rueda, sino arrastrar el relleno con el botón del mouse. Además, la página puede estirarse tanto hacia los lados como hacia abajo.

También puede consultar la lista a continuación, el sitio en sí le mostrará el lugar correcto.

¿Podrías presentar repuestos y otro hardware de una forma tan original? Este es un ejemplo de cómo el paralaje puede ayudar a que el sitio web de un producto sea memorable e interesante, incluso si el producto es muy específico y está destinado a un círculo reducido de personas.

Y aquí hay una versión interesante del sitio web del restaurante. Aquí hay poco contenido textual, y el diseñador encontró una solución ingeniosa: combinarlo con fotografías brillantes que se encuentran en una capa diferente y se mueven a una velocidad diferente. Bastante fresco y original.

Aquí vemos maravillosos efectos 3D, para cuya creación utilizamos tanto el video de fondo como fotos de diferentes tamaños, e incluso el desenfoque de aquellos elementos que parecen estar justo "frente a la nariz del usuario". Y la diferente velocidad de movimiento de las capas, por supuesto.

Un ejemplo sorprendente de un enfoque no estándar del paralaje. Un fondo que se mueve por sí solo combinado con un texto que se desplaza hacia abajo; Modelos 3D creados a la derecha; cambiar los colores de fondo al desplazarse: todo esto hace que el sitio sea realmente inolvidable.

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 con un 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.

Alejandro Lazos, el director creativo de la agencia, explica que lo más trivial resultó ser combinar un juego HTML5 y scroll de paralaje.

“Queríamos que toda la acción ocurriera de forma continua y 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. 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 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 manera 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.

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 una increíble página de inicio que explica de una manera accesible e interesante cómo funciona una cooperativa de ahorro y crédito, dónde encontrar un oficinas de la organización y mucho más. Además, hay 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 "Tú 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. Primero, 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 exterior del vehículo. Al crear videos, nos enfocamos en el espectador sofisticado, y con las tecnologías que existen hoy en día, 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, cuya principal tarea 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, tuvo 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 la fuente, 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 institución líder en el Reino Unido para el estudio de la enfermedad de Alzheimer, se compromete a presentar su trabajo y sus resultados de una manera atractiva 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”, comparte su experiencia Danny Ashton, director de la empresa. "Consideraron 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. ¡Todo el mundo! Este es un enfoque muy divertido y muy exitoso, que también demuestra que esta tecnología le permite inventar formas ingeniosas de presentación de 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 ajustarla a una trama 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 tuvo la tarea 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 de Parallax agrega profundidad a la página de inicio 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 paralaje es una especie de entusiasmo en la acción que organizan: el efecto 3D resultante agrega profundidad a su creación.

17. The Jacksonville Downtown Art Walk

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 consta de docenas de galerías, museos y bares. Todo esto lo acompañan 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 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, 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 pagina de inicio sitio, estos círculos se juegan con el 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.

22. Conferencia jQuery

Los desarrolladores del sitio web de jQuery Conference no se olvidan de lo principal: mantienen el equilibrio adecuado entre informatividad y ostentación.

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 activa 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.

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

Con el fin de presentar al público objetivo la nueva serie de juegos de Mario Kart, una conocida empresa japonesa ha desarrollado una página de destino que informa 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.

Activate Drinks es un distribuidor de bebidas fortificadas y ha desarrollado un recurso que es relevante en todos los aspectos para promocionar sus productos. 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 utiliza 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 reconocido 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 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 y fotografías expresivas que presentan a la perfección el producto.

30. Jason Kenny OBE

Página de destino de Jason Kenny, tres veces campeón olímpico y dos veces campeón mundial de ciclismo

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 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

Entre el creciente número páginas de destino que utilizan la posición de la barra de desplazamiento para activar animaciones y efectos de sonido, destaca la creación de la agencia francesa La Moulade con un indicador muy inusual de tu posición en la página. Se coloca 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, somos fanáticos de este programa", el diseñador principal Gavin Beck comparte sus impresiones sobre el trabajo en el proyecto. - Nuestros planes eran crear un sitio que coincidiera con el mundo " Muertos vivientes”Que los fans de la serie 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 la ofreció el diario estadounidense The New York Times, que desarrolló nueva forma Envíos de artículos e historias de revistas es un sitio de una página que presenta lo último en diseño web e ilustrado por Atilla Futaki.

Tan pronto como comience a desplazarse por la página, las ilustraciones se moverán y lo sumergirán en la acción descrita.

34. Pagos por servicios de salud

Nada complicado, parece, pero parece bastante entretenido.

Independientemente de si la institución de salud es 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 comience a desplazarse 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 máximos de compensación 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 desplazarse

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 ahorros

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 brinda más tiempo para suavizar las transiciones y construir de manera efectiva. 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 creadas sobre esta base 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ébelo usted mismo con plantillas en las páginas de inicio de LP Store

, Tortugas en el tiempo o juego original Patrulla lunar... En estos juegos, la técnica del paralaje se observa en el momento en que varias capas de fondo con diferentes texturas se mueven a diferentes velocidades, lo que crea el efecto de espacio tridimensional.

¿Por qué comencé a hablar de juegos retro en el artículo de desarrollo web? La respuesta más simple podría ser "porque son geniales", pero no. El desplazamiento Parallax es un concepto de diseño genial que se está abriendo camino en el mundo del diseño web. Nike fue de los primeros en utilizar esta técnica con gran éxito cuando contrataron a los gigantes del marketing Weiden y Kennedy para diseñar su sitio web original Nike Better World. Desde entonces, el sitio de Nike Better World ha sido actualizado y reemplazado por uno nuevo, sin embargo, hay otro sitio bastante similar a cómo se veía el primer diseño de paralaje de Nike, el sitio de bebidas deportivas Activate.

Probablemente haya notado que mientras se desplaza hacia abajo en una página de un sitio, varios elementos diferentes en esta página se mueven a diferentes velocidades. Tomemos como ejemplo la página que se muestra en la imagen de arriba. A medida que se desplaza hacia abajo en la página, verá que los puntos azules del fondo (los que están un poco borrosos) se mueven a la misma velocidad que la barra de desplazamiento. Además, verá que el grupo de puntos azules, que están más enfocados y en primer plano, se mueven a una velocidad un poco más rápida que la barra de desplazamiento. El texto “0 AZÚCAR | 0 CALORIAS | NATURALMENTE ENDULZADO ”y el título principal de la página de“ Productos ”. Y finalmente, hay imágenes del producto en sí, tanto pequeñas y desenfocadas de fondo, como grandes, enfocadas y en primer plano. Las imágenes de productos de fondo se mueven a la misma velocidad que el texto, mientras que las imágenes de productos de primer plano se mueven más rápido que el texto. Todo esto es una demostración perfecta de desplazamiento de paralaje, donde diferentes capas de imágenes se superponen entre sí y todas se mueven a diferentes velocidades a medida que se desplaza por la página, creando un efecto tridimensional.

El desplazamiento Parallax no se limita al desplazamiento vertical de la página o al desplazamiento en línea recta. Démosle a Nintendo el derecho de proporcionar un ejemplo perfecto para respaldar esta afirmación. Recuerde los primeros juegos de Nintendo, donde nuestros héroes generalmente se movían horizontalmente de izquierda a derecha a lo largo de la pantalla, en lugar de verticalmente hacia abajo, como vimos en el sitio web de Activate arriba. Dé un paseo en el MarkioKart Wii y hablemos de algunas de las cosas interesantes que podemos ver allí.

Lo primero que notará es la dirección de desplazamiento de la página: no es vertical, sino como se mencionó anteriormente, pero inicialmente horizontal. Claro, es genial, pero tampoco es un concepto nuevo. Además, notarás un efecto de paralaje con el dinosaurio y las conchas de Yoshi en el fondo, Mario y Luigi en primer plano y el contenido principal moviéndose a diferentes velocidades a medida que te desplazas. Pero tan pronto como llegue a las páginas #highlights y #attack, la ruta de desplazamiento ya no es perfectamente horizontal. Lo mismo ocurre con la navegación entre las páginas #rediscover y #snes. Las imágenes no solo conservan sus diferentes tasas de desplazamiento, sino que también cambian direccion GENERAL de horizontal a vertical.

También vale la pena señalar que el uso del efecto de paralaje en su sitio web no debe limitarse a crear un efecto 3D artificial. El sitio web del estudio de diseño web alemán Webseitenfactory es un ejemplo de cómo se puede usar el paralaje para agregar varios efectos a una página web, como mover iconos a lo largo de diferentes rutas, acercar y alejar el zoom a medida que el sitio se desplaza.

El desplazamiento de Parallax también puede ayudar a animar un sitio que no tiene mucho contenido. ¿Qué pasa si todo su sitio consta de una declaración de misión o una sección sobre nosotros, además de información de contacto? Lo más probable es que pudieras hacerlo en una página y, bajo ciertas condiciones, habrías obtenido un buen sitio de una página, pero ¿será recordado por los visitantes? Lo más probable es que no. Pero, ¿qué pasa si le agregas un poco de paralaje, como lo hizo la gente en Primavera / Verano?

Mi primera impresión fue "Oh, este sitio se ve bonito". Pero cuando comencé a desplazarme, la impresión se convirtió inmediatamente en "¡Vaya, este sitio es genial!". Agregar un simple efecto de paralaje es lo que marca la diferencia entre lo bueno y lo memorable.

El desplazamiento de Parallax es un buen truco para mantenerse bajo la manga. Y siempre se puede aplicar independientemente de si está creando un sitio complejo de varias páginas o un sitio simple para tarjetas de presentación de una página.

Ejemplos de sitios de paralaje

Hola, todos. Hoy les hablaré de un pequeño guión para crear un efecto de paralaje simple.

El artículo será breve, pero informativo, por lo que en 15 minutos puede agregar paralaje a su página de destino. Si hace tiempo que desea agregar este efecto interesante a su sitio, siga leyendo ...

¿Qué es el efecto de paralaje en el sitio web?

Primero hablemos de qué se trata. Entonces, el efecto de paralaje en el diseño web es una técnica en la que la imagen de fondo se mueve más lentamente que los elementos que están encima de ella. Para los más experimentados, haré una reserva de que no "vincularemos" el efecto de paralaje al cursor del mouse. simplemente crea un fondo de paralaje. Empecemos.

Cómo hacer un efecto de paralaje en un sitio web

Entonces, en primer lugar, incluimos la biblioteca jquery. Como de costumbre, entre las etiquetas de la cabeza:

Ahora, necesita descargar connect el script de desplazamiento simple de paralaje. Recomiendo usar la versión comprimida inmediatamente como ajustes adicionales no es necesario hacerlo dentro del script:

Ahora, averigüemos qué se debe escribir en la página html para que funcione nuestro efecto de paralaje.

Paralaje de datos = "desplazamiento"

Data-image-src = "ruta a la imagen / bg.png"

Tenga en cuenta que la imagen no se coloca en el encabezado usando la etiqueta img, sino que se establece directamente en el atributo en el contenedor en el que queremos implementar el paralaje.

Sobre esto, en principio, puede terminar, pero algunas palabras más:

• Si no hay otros elementos en la inmersión en los que queremos implementar el efecto de paralaje, entonces debe establecer su altura, de lo contrario no verá nada.
• En el caso de un diseño que no responde, puede establecer el ancho y el alto de la imagen directamente en html usando los atributos naturalWidth y naturalHeight.
• Puede mover imágenes utilizando el atributo de posición de datos. Es análogo a background-position en css.

El resto de opciones se pueden encontrar en la página oficial del proyecto, que se indica arriba.