Efecto de paralaje elemental con Rellax.js (Pro)
Rellax es una extensión Master Addons Pro que lleva la biblioteca de paralaje Rellax.js a Elementor. Enciéndalo para un elemento, establezca una velocidad de -10 a 10 y ese elemento se desplaza más rápido o más lento que el resto de la página, lo que crea una sensación de profundidad. Puede configurar una velocidad diferente para tableta y dispositivos móviles, elegir la dirección vertical u horizontal y usar Z-Index para mantener las capas en movimiento detrás o delante de su contenido. No es necesario cargar código o script.
Cómo agregar un efecto de desplazamiento de paralaje en Elementor
Necesitas Elementor y un activo Complementos maestros Pro licencia.
- Ir a Complementos maestros, extensiones, enciende Rellax y guarda.
- Edite su página con Elementor y seleccione el widget que desea mover, como una imagen, un ícono o una forma.
- Abra la configuración de Rellax para ese elemento y enciéndalo Rellax habilitado.
- Establezca una velocidad, por ejemplo -2 para una deriva lenta, y ajústela para tableta y dispositivos móviles.
- Elija Vertical u Horizontal y establezca Z-Index para que la capa no cubra su texto.
- Obtenga una vista previa de la página y desplácese para comprobar el movimiento.
Más detalles están en el Configuración de extensión Rellax.
Velocidad, Porcentaje y Dirección
Velocidad va de -10 a 10 en pasos de 0,1 y se puede configurar por dispositivo. Los valores negativos hacen que el elemento se mueva más lento que la página, por lo que se siente más lejos, y los valores positivos lo mueven más rápido, por lo que se siente más cerca. Porcentaje (0 a 1) establece dónde se encuentra el elemento cuando comienza su movimiento, y el Vertical y Horizontal opciones elige la dirección.
- Una lenta deriva de -1 a -2 para formas decorativas detrás de un héroe.
- Una pequeña velocidad positiva para íconos flotantes frente al contenido.
- Una velocidad más baja o 0 en el móvil si el movimiento se siente demasiado fuerte en pantallas pequeñas.
Capas con índice Z
Las capas de paralaje pueden deslizarse sobre texto y botones. Rellax agrega un Índice Z configurar de -1 a 50, para que puedas mantener una capa de fondo en movimiento debajo de tu contenido y una forma de primer plano encima de él. Rellax mueve todo el elemento, no su imagen de fondo, así que coloque la imagen que desea mover en su propio widget de imagen.
- Utilice -1 para capas que deberían quedar detrás del contenido.
- Mantenga los titulares y botones fuera del camino de las capas en movimiento.
- Pruebe el desplazamiento en un teléfono real antes de publicarlo.
Efectos de movimiento de Elementor frente a complementos maestros Rellax
Elementor Pro ya tiene efectos de movimiento con efectos de desplazamiento. Así es como se comparan los dos.
| Característica | Efectos de movimiento Elementor Pro | Complementos maestros Rellax |
|---|---|---|
| Precio | Necesita Elementor Pro | Necesita complementos maestros Pro |
| Movimiento de desplazamiento | Desplazamiento vertical y horizontal con velocidad y rango de ventana gráfica | Velocidad de Rellax.js de -10 a 10, vertical u horizontal |
| Otros efectos de desplazamiento | Transparencia, desenfoque, rotación y escala | Ninguno, sólo movimiento |
| Efectos del ratón | Pista del ratón e inclinación 3D | No |
| Paralaje de fondo | Efectos del movimiento de fondo en secciones y contenedores | Mueve todo el elemento |
| Configuración por dispositivo | Elija dispositivos donde se ejecutan los efectos | Velocidad por dispositivo |
Si ya tienes Elementor Pro, Motion Effects cubre más tipos de efectos. Rellax se adapta a capas simples basadas en la velocidad cuando utiliza Master Addons Pro. Para movimientos en bucle que no dependen del desplazamiento, consulte Efectos flotantes (Pro).
¿qué es Rellax.js?
Rellax.js es una pequeña biblioteca JavaScript de código abierto de Dixon y Moe que hace que los elementos se muevan a una velocidad diferente mientras una página se desplaza. En un sitio codificado a mano, agrega el script, le da a los elementos una clase de rellax y establece opciones como velocidad, porcentaje, índice z y dirección en el código.
Esta extensión incluye Rellax.js dentro de Master Addons Pro y asigna esas opciones a los controles de Elementor, por lo que configura la velocidad, el porcentaje, el índice Z y la dirección desde el panel. El script solo se carga en páginas donde un elemento usa Rellax. Si no está en Elementor, utilice la biblioteca Rellax.js directamente.
Preguntas frecuentes sobre Rellax
¿funcionará el efecto de paralaje en dispositivos móviles?
Sí. La velocidad se puede configurar por separado para tableta y dispositivos móviles, por lo que puedes usar un valor menor o 0 en teléfonos si el movimiento se siente demasiado fuerte. Pruebe siempre en un dispositivo real.
¿Puedo hacer que una imagen de fondo de sección se mueva?
Rellax mueve todo el elemento, no una imagen de fondo. Coloque la imagen en su propio widget de imagen detrás de su contenido y agregue Rellax a ese widget, o use los efectos de movimiento de fondo de Elementor Pro para un fondo de sección en movimiento.
¿la extensión Rellax es gratuita?
No. Rellax es parte de Complementos maestros Pro. La biblioteca Rellax.js en sí es gratuita y de código abierto si la agrega con su propio código.
¿demasiados efectos de paralaje pueden ralentizar mi sitio?
Ellos pueden. Cada elemento móvil hace que el navegador haga más trabajo mientras se desplaza. Utilice paralaje en algunos elementos clave por página y mantenga velocidades modestas.
Widgets y extensiones de Elementor de tendencia
Cree sitios web sofisticados en menos tiempo.
Vidriomorfismo
Extras de contenedores
Patrones
![Extensión de duplicador de páginas/publicaciones de complementos maestros para Elementor: enlace de fila de duplicador MA en la lista de páginas de WordPress que crea una página de inicio - borrador [duplicado #128]](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Duplicador de publicaciones/páginas
