En movimiento, el paralaje significa un cambio en la ubicación de un objeto contra un fondo en relación con un observador que está en su lugar. Este término ha ganado popularidad en Internet. En particular, el sitio parece interesante, en cuyo diseño hay elementos dinámicos. Parallax es una técnica de diseño de páginas web utilizada por los webmasters para atraer a un gran número de visitantes.
¿Cómo es el paralaje?
El desplazamiento de paralaje se puede utilizar tanto vertical como en línea recta. Nintendo es el mejor ejemplo. Muchos de nosotros recordamos con nostalgia los juegos de computadora, representados por el movimiento de los personajes principales desde el lado izquierdo de la pantalla hacia el derecho. También es posible moverse hacia abajo, realizado a lo largo de una línea recta ubicada verticalmente. El efecto de paralaje en la web se usa a menudo. Puede usar JavaScript o CSS para crear un control deslizante vertical 3.
El efecto espacial tridimensional descrito es simplemente característico de ellos. Los creadores de los juegos utilizaron varias capas de fondo. Se diferencian en la textura, mientras que el movimiento se realiza con diferentesvelocidad.
No creas que el paralaje es solo un efecto 3D. En la página, puede mover los iconos existentes. Además, se ve bastante atractivo. Una opción particularmente buena es utilizar una trayectoria individual para cada uno de ellos. En este caso, se utilizan diferentes íconos, moviéndose a lo largo de diferentes trayectorias. Este diseño llama la atención.
La imagen cobra vida
Es difícil encontrar un sitio sin imágenes. Los dibujos demostrativos y de alta calidad atraen a los visitantes. Pero la mayor parte de la atención se dirige a varios tipos de imágenes dinámicas. De hecho, si hay movimiento al visitar un sitio, entonces llama la atención. Aumenta significativamente la probabilidad de que un visitante regrese a un recurso a una imagen dinámica. ¿Parecía moverse o no? Por lo tanto, para atraer visitantes al sitio, vale la pena estudiar algo como el efecto de paralaje.
Ejemplos de sitios con imágenes en movimiento:
- hvorostovsky.com;
- www.kagisointeractive.com.
Como se muestra en los ejemplos, la experiencia se mejora con menús desplegables en subelementos. Este elemento ahorra tiempo a los visitantes, por lo que les resulta atractivo.
biblioteca jQuery
El término jQueryParallax define la biblioteca del mismo nombre. Gracias a él, es fácil conseguir el efecto de movimiento en formato 3D. En la biblioteca jQuery, la percepción 3D se crea de varias formas. Uno de ellos consiste en el movimiento simultáneo horizontal de objetos de fondo convelocidad diferente Esta biblioteca se caracteriza por la presencia de un gran número de diferentes tipos de propiedades. Y el desplazamiento descrito aquí es solo una pequeña parte de sus capacidades.
El sitio se ve bastante atractivo, para cuya creación se utilizaron varios elementos modernos. Uno de ellos es el paralaje. Los sitios de ejemplo podrían tener este aspecto:
- www.grabandgo.pt;
- www.fishy.com.br;
- www.noleath.com;
- buysellwebsite.com.
jParallax se representa mediante capas que se mueven con el mouse. Los elementos dinámicos se caracterizan por un posicionamiento absoluto (position:absolute;). Cada uno de ellos se caracteriza por su propio tamaño y movimiento a una velocidad individual. Puede ser texto o una imagen (a petición de los creadores del recurso).
Percepción del visitante del sitio
Después de eso, una persona generalmente presta atención al hecho de que la página está diseñada con alta calidad, conveniente y bien informada. Este hecho suele ser respetado. Sucede que surge la curiosidad por probar otros elementos. Hay una gran cantidad de sitios idénticos en Internet. ¿Cómo hacer que su recurso sea especial?
Si te gusta el diseño, el visitante se quedará por más tiempo. Por lo tanto, aumenta la probabilidad de que se sienta atraído por la información publicada, mostrará interés. Como resultado, una persona utilizará el servicio, producto u oferta promocional ofrecidos.
Juegos antiguos favoritos
El concepto de "paralaje" debería ser familiar para todosfanáticos de las consolas de los años 80 y 90. Esto se aplica a los juegos:
- Mario Bros.
- Mortal Kombat.
- Calles de ira.
- Patrulla Lunar.
- Tortugas en el tiempo.
Es decir, el paralaje es una técnica que se ha utilizado durante bastante tiempo. Estos juegos son realmente recordados con cierta nostalgia. Después de todo, parecen estar imbuidos del carácter de ese período.
Las imágenes en la pantalla se crean utilizando una técnica como el desplazamiento de paralaje. No hay nada sorprendente en el hecho de que esta técnica haya ganado una merecida popularidad. Este concepto de diseño es bien recibido por aquellos que jugaron en los años 80 y 90 o vieron el tiempo libre de los amigos.
Desplazamiento de paralaje
Los comercializadores de las principales marcas del mundo han utilizado durante mucho tiempo todo tipo de avances técnicos. Por lo tanto, es posible interesar incluso a un visitante ocasional del sitio.
Nike ha utilizado con bastante éxito el desplazamiento Parallax. El sitio web original de la empresa fue diseñado por Weiden y Kennedy. Pero este diseño no sobrevivió. El recurso se actualizó gradualmente, de acuerdo con las tendencias de nuestro tiempo. Activatedrinks.com es un ejemplo de un sitio cuyo diseño recuerda al utilizado por los vendedores de Nike de la época.
Los parlantes no deberían ser demasiados
No olvide que el diseño del sitio suele ser el criterio clave que guía al visitante. mal ejecutadoel recurso suele dejar al usuario con la impresión de la frivolidad de la empresa propietaria. Pero un sitio con todo tipo de elementos de diseño atractivo indica el deseo de los propietarios de la organización de interesar a los visitantes.
Aquí vale la pena recordar el paralaje. Esta es una herramienta maravillosa. Pero incluso ellos no deberían dejarse llevar demasiado. Porque la página, en la que hay una gran cantidad de diversos tipos de elementos en movimiento, es bastante difícil de percibir. Lo mejor es hacer que el diseño sea moderadamente elegante y comprensible.
Dinámico deben ser elementos individuales que requieran selección. También puede haber una imagen que se crea utilizando capas que se mueven una con respecto a la otra. No olvide que el sitio del usuario está diseñado principalmente para los visitantes. No tiene por qué ser una obra maestra de un webmaster que ha puesto todo su conocimiento en ella. Después de todo, tal enfoque solo complicará la percepción.
Cómo crear un sitio de navegación
¿Cómo hacer paralaje? Esta pregunta es de interés para muchos creadores de sitios web. No es necesario conocer las complejidades de escribir etiquetas. Es muy conveniente utilizar recursos especiales en Internet. De la gran cantidad de propuestas disponibles, se pueden distinguir los siguientes ayudantes:
- Plax es un programa bastante fácil de usar. Tiende a hacer que la página sea fluida moviendo el mouse.
- jQuery Parallax Image Slider: un complemento de jQuery que se usa para crear controles deslizantes de imágenes.
- Jquery Image Parallax: adecuado para diseñar dibujos transparentes. A través de su uso de PNG, los-g.webp" />
- Curtain.js se usa para crear una página con paneles fijos. En este caso se observa el efecto de abrir las cortinas.
- Scrolling Parallax: un complemento de jQuery sirve para crear un efecto de paralaje al desplazar la rueda del mouse.
Algunos complementos más útiles
Como saben, la información es de gran valor. Y cuanto mayor sea el número de formas de lograr lo deseado, más cercana será la probabilidad de obtener el resultado correcto. Complementos útiles utilizados para crear dinámicas:
- jQuery Scroll Path: se utiliza para colocar objetos en la ruta especificada.
- Scrollorama es un complemento de jQuery. Se utiliza como una herramienta para el diseño de materiales atractivos. Le permite "revivir" el texto en la página debido al desplazamiento conveniente.
- Scrolldeck es un complemento de jQuery. Es una excelente solución de presentación para sitios de una sola página.
- jParallax representa el movimiento de las capas dependiendo del movimiento del puntero del mouse.
- Stellar.js es un complemento con el que se diseña cualquier elemento con la adición de un efecto de desplazamiento de paralaje.
Parallax anclado al cursor
Este paralaje se ve bastante impresionante. Inmóvil a primera vistalos objetos de la página del sitio se mueven cuando se acerca el cursor del ratón. Parece cobrar vida y sigue al elemento que se mueve.
Primero, debes detenerte en la imagen. La imagen requerida se coloca en un marco, mientras que sus bordes deben estar ocultos. El método es muy simple y el dibujo resultante se ve muy atractivo.
El efecto Parallax para el sitio es una manera maravillosa de diseñar. Su uso indica que se prestó la debida atención a la creación del recurso. Por lo tanto, vale la pena prestar atención a los servicios ofrecidos o información para leer. Dichos sitios parecen más ventajosos en el contexto de recursos idénticos, pero simplemente diseñados.
