Saltar al contenido

Cómo hacer que las capas de Slider Revolution cambien al pasar el mouse

Cómo hacer que las capas de Slider Revolution cambien al pasar el mouse

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.

Los efectos de desplazamiento son uno de los elementos básicos de una buena experiencia de usuario. Cuando un elemento cambia al pasar el mouse, sirve como una clara indicación de que se requiere, se realiza o se completa una acción. En los controles deslizantes, generalmente hacemos que las capas cambien al pasar el mouse cuando vienen con algún tipo de acción implícita o requerida. Un buen ejemplo son los botones, donde el cambio al pasar el mouse indica que se realiza la acción (hacer clic en el botón que activa un enlace). Además de los botones, con Slider Revolution puede hacer que otras capas, como el texto, también cambien al pasar el mouse. De hecho, hoy le mostraremos cómo agregar efectos de desplazamiento de Slider Revolution al texto.

Lo primero que debe hacer es activar la capa flotante. Seleccione la capa a la que desea agregar el efecto y, debajo Opciones de capa, haga clic en Flotar. Clickea en el Habilitado cambie para encenderlo.

Efectos de desplazamiento en Slider Revolution

Debajo encontrará todas las opciones que necesita para configurar el comportamiento de su capa al pasar el mouse. Si deja todo como está, la capa no mostrará ningún cambio.

Configuración de desplazamiento

Lo primero que puede establecer aquí es el Cursor. El menú desplegable contiene un par de opciones diferentes para ello. Auto y Defecto son los mismos, y elegirlos no se reflejará en su cursor de ninguna manera.

Configuración de desplazamiento

los Punto de mira y Puntero se refieren a la forma del cursor del mouse en la pantalla. Ambos son bastante convencionales.

Punto de mira y puntero

Puede encontrar un par de estilos de cursor más aquí, algunos de ellos un poco inusuales, pero cada uno indica el tipo de acción que tiene su capa cuando se activa. Por ejemplo, si su capa está vinculada a un recurso de ayuda o soporte, puede ir con el Ayuda cursor.

Evento de puntero se establece en Auto por defecto. La opción Ninguna se utiliza cuando no hay contenido vinculado detrás de la capa.

Evento de puntero

Transformación de desplazamiento

Pasando a otras configuraciones para el comportamiento de la capa al pasar el mouse, tenemos Hover Transform, que puede configurar a su gusto. Sin embargo, hay algunas cosas a tener en cuenta aquí. Por ejemplo, cuando la capa cambia al pasar el mouse, la transición no debería ocurrir de repente. Siempre es mucho mejor cuando la transición ocurre con un poco de retraso. El retraso está configurado de forma predeterminada en 300 ms, para que pueda dejarlo así si le funciona, o asignarle un valor diferente.

Transformación de desplazamiento

También puede configurar el aliviar para la transición, eligiendo entre varias opciones predeterminadas.

Facilitación para la transición

Si no desea que su capa de texto tenga el mismo tamaño y estilo que el aspecto inicial, puedes cambiar todo, desde la perspectiva, mediante la rotación, hasta el tamaño.

Editar capa de texto

Colocar el cursor sobre fuente, borde y filtro

Estilo de desplazamiento de fuente nos permite cambiar el color del texto al pasar el mouse o agregar un subrayado, una línea superior o una línea.

Estilo de desplazamiento de fuente

También puede agregar un color de fondo a tu vuelo estacionario.

Agrega un color de fondo a tu hover

También existe la posibilidad de agregando un borde alrededor del texto y especificar el color, elegir el estilo e ingresar el valor del grosor del borde expresado en píxeles.

Agregar un borde alrededor del texto

Los ángulos del borde pueden tener un radio, también especificado en píxeles.

Radio de los ángulos de borde

Una cosa más que se puede agregar a sus capas al pasar el mouse es Filtrar. Básicamente, esto significa difuminar la capa hasta cierto punto específico. Esto también se expresa en píxeles: cuanto mayor es el valor, más “grueso” es el desenfoque.

Filtro flotante

En conclusión

Eso es prácticamente todo lo que hay que hacer para crear efectos de desplazamiento de Slider Revolution. Como básicamente cualquier otra cosa sobre este plugin, este proceso también es muy simple y directo. El plugin le permite agregar este efecto dinámico a sus diapositivas y personalizar la forma en que se reproducirá, asegurando que el efecto resultante haga clic perfectamente con el resto de su página.