El paralaje es el efecto en el que diferentes partes de una página se desplazan a diferentes velocidades, por lo que el fondo pasa más lento que el primer plano y la sección capta una sensación de profundidad. El Extensión Rellax en Complementos maestros Pro añade eso Desplazamiento del paralaje elemental efecto a widgets como una imagen o un encabezado, utilizando la biblioteca Rellax.js, sin tocar una línea de JavaScript. Aparece como una sección en la pestaña Avanzado del elemento, con controles de velocidad, porcentaje de movimiento, índice z y dirección.
Aquí es donde vive Rellax, qué hace cada configuración y cómo se ve el efecto una vez que la página está activa.
Qué hace la extensión Rellax #
Rellax fija una animación basada en desplazamiento al elemento que seleccione. A medida que el visitante se desplaza, ese elemento se mueve más rápido o más lento que el resto de la página, dependiendo de la velocidad que establezca. Apunta a una imagen de héroe y el fondo se desliza; Apunta a un titular y el texto flota delante de todo lo que lo rodea. Dado que funciona por elemento, puedes mezclar un par de velocidades diferentes en la misma sección y crear un desplazamiento en capas sin un complemento de paralaje dedicado.
Piense en ello como el primo basado en pergaminos de otras dos herramientas de movimiento Master Addons: Efectos flotantes, que anima un elemento por sí solo sin ningún desplazamiento, y Transforma, que maneja rotar, escalar y sesgar.
Antes de empezar #
- WordPress con Elementor instalado y activo.
- Complementos maestros Pro instalado con una licencia activa, ya que Rellax es una extensión Pro. Si aún no lo has instalado, sigue el guía de instalación.
- La extensión Rellax habilitada en el panel de opciones de complementos maestros.
- Un widget para animar, como una imagen, un icono o un Titular de gradiente. Rellax mueve todo el widget, no una imagen de fondo de sección.
Cómo agregar un efecto de paralaje en Elementor #
Selecciona el elemento que deseas mover. Abre el Avanzado pestaña en el panel Elementor y desplácese hacia abajo hasta Reláx sección (lleva la insignia morada de Master Addons). Expandelo y voltea Rellax habilitado a Sí. Ese interruptor es el interruptor para todo el efecto, por lo que no pasa nada hasta que está activado.
Una cosa que hace tropezar a la gente: el paralaje sólo se ejecuta en la página en vivo o en la vista previa, nunca mientras estás editando en el lienzo. Así que no esperes a que el elemento se mueva dentro del editor, presiona vista previa para verlo.
Se explican los ajustes de Rellax #
Con Enabled Rellax activado, el resto de controles dan forma a cómo viaja el elemento:
- Velocidad: qué tan rápido se mueve el elemento en relación con el desplazamiento. Los números positivos más altos hacen que suba más rápido a medida que se desplaza hacia abajo; los números negativos lo empujan en sentido contrario. La demostración usa 6. Comience alrededor de 4 a 6 y ajústelo desde allí, ya que los valores grandes pueden sacar un elemento de su sección.
- Porcentaje: el punto de partida de la animación, de 0 a 1, según dónde se encuentra el elemento en la ventana gráfica. La demostración lo establece en 0,4. Empuja esto cuando el efecto se activa demasiado pronto o demasiado tarde.
- Index Z: orden de apilamiento, la misma idea que CSS z-index. Levántelo (la demostración usa 3) cuando un elemento de paralaje necesita ubicarse encima o debajo de un vecino, se superpone a mitad del desplazamiento.
- Vertical: mueva el elemento hacia arriba y hacia abajo a medida que se desplaza la página. Esta es la dirección habitual del paralaje.
- Horizontal: mueva el elemento hacia la izquierda y hacia la derecha. Práctico para elementos que desea deslizar hacia adentro desde un lado.
La velocidad y el porcentaje tienen el ícono responsivo al lado, por lo que puede establecer diferentes valores para escritorio, tableta y dispositivos móviles. Eso importa más de lo que parece. Una velocidad que se ve muy bien en un escritorio ancho puede resultar discordante en un teléfono, donde la pantalla es corta y el elemento cubre mucho terreno en un espacio pequeño. Bajar la velocidad del móvil suele ser la solución.
Vea el efecto de paralaje en la página en vivo #
Publique la página (o abra la vista previa) y desplácese. El elemento que habilitaste para que Rellax se mueva a su propio ritmo mientras el resto de la página se desplaza normalmente, y esa diferencia de velocidad es lo que vende la profundidad. Aquí está el héroe de demostración, con una imagen de paralaje desplazándose contra un titular de “Desplazarse hacia arriba”:
Si el movimiento se siente demasiado fuerte o demasiado sutil, vuelva al control de velocidad y modifíquelo. Parallax es uno de esos efectos en los que un número pequeño suele leer mejor que uno grande.
Casos de uso comunes #
- Imagini de hero: dale a un widget de imagen en un héroe de la página de destino una deriva lenta para que la sección se sienta viva en el momento en que alguien se desplaza.
- Titluri flotante: coloque a Rellax en un rumbo para que se eleve por delante del contenido que se encuentra debajo.
- Secciones en capas: establezca dos o tres elementos a diferentes velocidades en la misma sección para un desplazamiento apilado de múltiples profundidades.
- Llamadas de funciones: deslice un ícono o insignia horizontalmente a medida que el visitante llegue a él.
- Paginas de narración: utilice un paralaje suave entre los bloques para evitar que un pergamino largo se sienta plano.
Para movimientos que no están vinculados al desplazamiento, empareje Rellax con Animación de entrada entonces los elementos se animan a medida que aparecen y luego continúan moviéndose con paralaje a medida que continúa el desplazamiento. Explora el completo widgets y extensiones lista para ver el resto del kit de herramientas de movimiento.
Vídeotutorial #
¿prefieres verlo? Este video recorre la extensión de Rellax de extremo a extremo, desde habilitarlo en un elemento hasta el desplazamiento de paralaje en la página en vivo:
Preguntas frecuentes #
¿cómo agrego un efecto de desplazamiento de paralaje en Elementor?
Seleccione un elemento, abra la pestaña Avanzado, expanda la sección Reclax de complementos maestros y establezca Rellax habilitado en Sí. Luego configure la velocidad y el porcentaje. El elemento se desplaza a su propio ritmo en la página en vivo, no se requiere código.
¿por qué no puedo ver el efecto de paralaje en el editor Elementor?
Rellax solo se ejecuta en la parte frontal. El elemento permanece quieto mientras editas en el lienzo, así que abre la vista previa o ve la página publicada para ver el movimiento de paralaje.
¿qué hace la configuración de Velocidad en Rellax?
La velocidad controla qué tan rápido se mueve el elemento en comparación con el desplazamiento de la página. Los valores positivos más altos lo mueven hacia arriba más rápido a medida que avanzas hacia abajo, y los valores negativos invierten la dirección. Los valores de alrededor de 4 a 6 funcionan bien para la mayoría de las secciones de héroes.
¿puedo usar una velocidad de paralaje diferente en el móvil?
Sí. Los controles de velocidad y porcentaje responden, por lo que puede establecer valores separados para computadoras de escritorio, tabletas y dispositivos móviles. Reducir la velocidad en dispositivos móviles evita que el efecto se sienta demasiado agresivo en pantallas pequeñas.
¿la extensión Rellax ralentiza mi sitio?
Rellax ejecuta una animación basada en desplazamiento por elemento, por lo que el impacto sigue siendo pequeño. Aplíquelo sólo a los elementos que lo necesitan, en lugar de a todos los bloques de la página, y todo se mantendrá fluido.
Envolviendo #
La extensión Rellax es la forma más rápida de agregar un Desplazamiento del paralaje elemental efecto sin complemento separado ni código personalizado. Habilitelo en cualquier elemento, configure la velocidad, el porcentaje, el índice z y la dirección, y el elemento se desplaza con profundidad real en la página en vivo. Para ver más formas de mover cosas por la pantalla, eche un vistazo Transforma y Efectos flotantes, y mira el Página de extensión de paralaje de Rellax para una comparación con los efectos de movimiento Elementor Pro.
