Saltar al contenido

Cómo crear un efecto de paralaje en Slider Revolution

Cómo crear un efecto de paralaje en Slider Revolution

Este artículo es parte de nuestra serie continua de tutoriales de Slider Revolution. Puede encontrar todos los artículos de esta serie en nuestra Guía completa de revolución deslizante.

Parallax es un efecto popular que agrega una impresión de profundidad y dinamismo al contenido visual de su sitio web. Hay muchos temas excelentes de WordPress premium con efectos de paralaje integrados y probablemente hayas visto el efecto miles de veces en la web. Pero es posible que te hayas preguntado cómo se hizo. Hoy vamos a hablar sobre el uso del efecto de paralaje en los controles deslizantes Slider Revolution.

El paralaje se puede definir aproximadamente como un efecto en el que los elementos del fondo y los del primer plano se mueven a diferentes velocidades cuando el usuario se desplaza, creando una ilusión de profundidad. Específicamente, los elementos del fondo están configurados para moverse más lentamente. A continuación puede ver un ejemplo de paralaje de nuestro tema Aoki.

Efecto de paralaje en Slider Revolution

Hay diferentes formas de lograr este efecto, y si ya está trabajando con Slider Revolution, le alegrará saber que este plugin incluye las funcionalidades necesarias para crear paralaje.

Cómo habilitar Parallax en Slider Revolution

Lo primero es lo primero: dirígete a Slider Revolution y enciende el paralaje. Ir Opciones generales del módulo> On Scroll> Funciones basadas en scroll> Parallax y gire el interruptor Parallax Enabled a En.

Habilitando Parallax en Slider Revolution

El plugin ofrece una serie de valores de profundidad diferentes para que pueda elegir el que mejor se adapte a sus necesidades. Si el valor que está buscando no está aquí, puede ingresar el suyo, como se muestra a continuación.

Funciones basadas en desplazamiento

Cómo agregar Parallax a las imágenes de fondo

Para agregar el efecto de paralaje a su imagen de fondo, vaya a Opciones de diapositiva> On Scroll> Configuración de Parallax y 3Dy elija la profundidad preferida del menú desplegable.

Habilitando Parallax en Slider Revolution

Cuando se trata de elegir la profundidad, no existe una regla de oro. Le sugerimos que pruebe diferentes valores para ver cómo funcionan en su página. Diferentes profundidades crearán diferentes efectos, así que pruébelos todos hasta que encuentre el efecto perfecto para su página. Si no tiene ganas de experimentar, los del medio siempre son una opción segura.

Eso es todo para el fondo.

Cómo agregar paralaje a las capas

El efecto de paralaje de Slider Revolution no está reservado solo para las imágenes de fondo. También puede usarlo para las capas individuales dentro de su control deslizante. Con este efecto, puede dar a sus usuarios la ilusión de que están controlando partes de su control deslizante moviendo el mouse. Este es un efecto realmente genial y es muy fácil de configurar.

Seleccione su capa, vaya a la Opciones de capa> Al desplazarse> pestaña Parallax y 3Dy elija el nivel de profundidad deseado.

Agregar paralaje a las capas

Y eso es todo lo que hay que hacer. El resultado será la capa con paralaje que se activa a medida que se mueve el mouse.

En conclusión

Como vimos, ya sea que estemos hablando de capas individuales o imágenes de fondo, agregar el efecto de paralaje de slider revolution es extremadamente simple. Sin embargo, tenga en cuenta que no todos los controles deslizantes necesitan paralaje. Los controles deslizantes muy dinámicos con mucha animación probablemente funcionarán mejor sin este efecto, ya que el resultado puede resultar demasiado ocupado o abarrotado de movimiento. Sin embargo, para los controles deslizantes simples, el paralaje puede ser justo lo que necesita para darle vida a su página.