Volver a los artículos
Añadir pestañas de rotación automática en Webflow
Tutoriales

Añadir pestañas de rotación automática en Webflow

Con un poco de código personalizado, el componente de pestañas de webflow puede tener superpoderes. Las pestañas auto-rotativas pueden ser una manera increíblemente efectiva de mostrar información de una manera más atractiva e interativa. Vea algunos de los ejemplos siguientes

Peter Bekkers
6 de mayo de 2021
Ejemplo de producto terminado


Hola chicos, en este tutorial les voy a mostrar cómo configurar las pestañas de Webflow para que pasen automáticamente por cada enlace de la pestaña en un tiempo determinado. Esto no interferirá con la capacidad ordinaria de los usuarios para hacer clic en los enlaces de las pestañas. 

Las lengüetas de rotación automática se pueden conseguir en tres sencillos pasos.

Paso 1. Añada el script en su sitio Webflow

Coloque este código dentro de la <head>etiqueta</head>

Todo lo que hace este código es decirle al navegador que bloquee cualquier resaltado accidental de los botones de la pestaña para darle más brillo, como se muestra en la demostración de abajo.


 


<body>Coloque este código antes de</body> la etiqueta

Esta es la parte importante del código. Puedes cambiar el tiempo a lo que quieras. Actualmente está configurado por defecto a 6 segundos por pestaña.



Añadir script a la cabecera y al cuerpo de las páginas



Paso 2. Crear un nuevo componente de pestañas

Hay dos formas de añadir un componente de pestañas, puedes ir al panel de añadir elementos, bajar a componentes y arrastrar el componente de pestañas. O la forma más rápida es presionar ctrl-e, escribir "tabs" y presionar enter. 

Creación de un nuevo componente de pestañas


Paso 3. Dé a todos sus enlaces de pestañas la clase "Pestaña estándar" y a su menú de pestañas la clase "Menú de pestañas".

El código que hemos insertado antes accederá a los enlaces de las pestañas y al menú de pestañas a través de estos nombres de clases. Aunque, puedes cambiar el nombre de las clases a las que se dirigirá el script.

Dar a los enlaces de pestaña un nombre de clase de "pestaña estándar"
Dar al menú de pestañas un nombre de clase "Menú de pestañas".

Ya está. Ya está. 

Ahora publique su sitio y véalo en vivo para ver sus pestañas auto-rotativas en acción.


¡Paso extra!

si te apetece ir más allá, te recomendamos crear una barra de carga para dar a los usuarios una indicación visual de cuándo se producirá el siguiente cambio de pestaña. No te preocupes, esto es súper fácil. 

Paso 1. Añade un bloque div dentro de tu enlace de pestaña - este contendrá tu barra de carga. 

Puedes establecer el nombre de la clase, la anchura, la altura y el color que quieras. El posicionamiento absoluto es lo importante aquí, ya que permitirá que la barra de carga que creemos a continuación se sitúe encima de este bloque div. 

Creación de la clase "Base de la barra de carga"

Paso 2. Añade otro bloque div dentro del div que acabas de hacer - este será tu barra de carga.

Debería tener el siguiente aspecto
  • Establezca el ancho al 0% (esto será animado para cambiar el tamaño al 100% más tarde)
  • La altura al 100% para que ocupe toda la altura de la envoltura de la barra de carga en la que se encuentra. 
  • Elige un color que te guste.


Paso 3. Cuando la pestaña está a la vista, queremos animar el tamaño de la "barra de carga" de 0% a 100% durante 6 segundos. 

  • Con su enlace 'Pestaña Estándar' seleccionado, vaya a interacciones y añada un nuevo elemento disparador para que ocurra en el "cambio de pestaña".
  • Crea una nueva animación temporizada cuando la pestaña está a la vista.
  • Seleccione la barra de carga y añada una nueva acción que afecte a su tamaño.
  • Ajuste el ancho al 0% y la duración a 0 segundos.
  • Con la barra de carga aún seleccionada - añada otra acción que afecte al tamaño. Esta vez estableceremos el ancho al 100% y la duración a 6 segundos.


Paso 4. Ahora tenemos que hacer que la barra de carga se restablezca al 0% cuando no sea la pestaña actual. 

Queremos crear otra nueva animación cuando la barra esté fuera de la vista. Con la barra de carga seleccionada, inicie una nueva animación y establezca su tamaño a 0% de ancho con 0 segundos de retraso.

Sólo queda admirar tu nueva e impresionante animación.

SOBRE EL AUTOR
Peter Bekkers

Peter es un destacado desarrollador de Webflow con un interés particular en elevar la funcionalidad de los Webflows a través de soluciones de código personalizado. Peter es un desarrollador principal en Flowbase y ha tenido sus manos en varios de los productos principales de Flowbase

¿Disfrutó de esta lectura?

Manténgase al día con las últimas noticias, estrategias e ideas sobre el negocio del vídeo enviadas directamente a su bandeja de entrada.

¡Gracias! Su presentación ha sido recibida!
¡Uy! Algo salió mal al enviar el formulario.

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.