Cómo crear un ticker tape / marquesina nativo en Webflow con el CMS

Cómo crear un scroller / ticker tape nativo en Webflow con el CMS

Al final del post también encontrarás el cloneable del proyecto que creé en el vídeo. Voy a empezar con una excusa por el vídeo: Milk Moon Studio es solo un pequeño estudio de Webflow, lo que significa que construyo muchos de estos para clientes, lo que significa que probablemente no soy muy bueno explicándolo, ya que a estas alturas me sale de forma natural.

Así que… un ticker tape, scroller o marquesina, que se ve a menudo en sitios de noticias o plataformas bursátiles, es una lista de elementos que se desplaza de forma continua en horizontal por la pantalla. En Webflow puede ser texto, imágenes, cualquier cosa que puedas meter en el CMS y quieras mover de un lado a otro de forma perpetua. Nuestro objetivo en este post y en el vídeo es crear un ticker responsive, impulsado por el CMS, que se adapte al contenido y ofrezca una experiencia fluida sin importar el número de elementos. Esta flexibilidad es importante para el contenido dinámico, donde el número de elementos o su ancho pueden variar.

Guía paso a paso

Paso 1: Preparar la estructura

Primero, veamos la estructura.

1. Section: Contendrá todo lo demás.
2. Scroll Wrapper: Gestionará el overflow y hará que solo se vea la parte visible del ticker. Es muy importante para envolver todo correctamente y evitar que la página se desborde del viewport del navegador.
3. Scroll Track: La pista por la que se desplazarán los elementos.
4. Collection List Wrapper: Lo duplicaremos para crear un bucle continuo, básicamente para que no veamos el final de los elementos de la collection list con un espacio en blanco detrás mientras se mueven por la pantalla.
5. Collection List: Aquí viven nuestros elementos dinámicos del CMS.
6. Collection List Items: Los elementos individuales del ticker.

Empezaremos creando los contenedores necesarios y después configuraremos la interacción.

Paso 2: Crear la Section y el Scroll Wrapper

1. Añade una Section: Será nuestro contenedor principal.

   Vamos a partir de la idea de que queremos un ticker de ancho completo, aunque no tiene por qué ser así y el cloneable incluye ambas versiones. Daremos a la section un ancho de 100vw.

2. Añade el Scroll Wrapper dentro de la section:

   Ponlo en flex, horizontal y alineado a la izquierda (vamos a mover el ticker de derecha a izquierda por la pantalla) y gestiona el overflow, es decir, overflow: hidden, con un ancho del 100%.

Paso 3: Añadir el Scroll Track y el Collection List Wrapper

1. Añade el Scroll Track dentro del scroll wrapper:

   Configura Flex Child Sizing en: Don’t shrink or grow.
   Ponlo en Flex, Horizontal, alineado a la izquierda.
   Pon el ancho en Auto.

2. Añade el Collection List Wrapper dentro del scroll track:

   Repite lo mismo:

   Configura Flex Child Sizing en: Don’t shrink or grow.
   Ponlo en Flex, Horizontal, alineado a la izquierda.
   Pon el ancho en Auto.

Paso 4: Configurar la Collection List

1. Lo mismo aquí:
   Configura Flex Child Sizing en: Don’t shrink or grow.
   Ponla en Flex, Horizontal, alineada a la izquierda.
   Pon el ancho en Auto.

Todo esto puede parecer algo redundante, pero funciona, así que confía en el proceso.
Ya tienes el ticker tape / scroller preparado para desplazarse de derecha a izquierda. 

Paso 5: Dar estilo a los Collection List Items

1. Configura Flex Child Sizing en: Don’t shrink or grow.
2. Dales el estilo que necesites, pero asegúrate de que cualquier ajuste de ancho, alto o padding se haga en ellos o dentro de ellos, no fuera. Por ejemplo, no queremos que definas el espacio entre elementos con margin, sino con padding dentro del elemento. Los margins en los elementos son fáciles de perder de vista una vez que la lista se duplica y se repite en bucle, mientras que usar padding dentro del elemento garantiza que el ‘espacio’ se mantenga siempre uniforme. (Los flex items no colapsan los margins como sí lo hacen los elementos block, así que el padding sirve para mantener todo predecible, no para evitar el colapso de margins.)
3. Lo bueno de construir con el CMS de esta forma es que puedes dar estilo al elemento, por ejemplo con un ancho fijo, y tendrás una lista de elementos uniformes, todos del mismo tamaño, desplazándose por la pantalla, o puedes dejar que el contenido del CMS dentro del elemento determine el ancho. Una lista de logos, todos con anchos distintos, cada uno en su propio elemento, crearía una bonita lista de logos en movimiento, pero los elementos no tienen que tener el mismo ancho, como sí ocurría en el ejemplo anterior. Mostramos ambos en el cloneable, pero esto lo hace flexible, sencillo y significa que funciona para texto, imágenes, cotizaciones bursátiles, lo que sea. Anchos fijos o dinámicos en los elementos.

Si quieres ir más allá con lo que va dentro de esos elementos, nuestros posts sobre cómo crear text spans en elementos de texto dinámicos del CMS y un patrón flexbox para el CMS que parece a medida merecen una visita.

Paso 6: Duplicar el Collection List Wrapper

Duplica el collection list wrapper para crear un bucle continuo. Nuestra interacción moverá la clase del Collection List Wrapper un 100% hacia la izquierda, y si no tenemos dos collection lists moviéndose hacia la izquierda, veremos espacio en blanco cuando toda la lista de elementos se haya desplazado.

Paso 7: Añadir la interacción

NB! Estos pasos usan las interacciones Classic de Webflow, que es lo que usamos cuando lo construimos. Las Interactions con GSAP son ahora la opción por defecto en los sitios nuevos, así que si el panel de Interactions se ve diferente, usa el menú desplegable de la parte inferior del panel para cambiar a Classic.

1. Ve a Interactions: En Webflow, crea una nueva interacción de page load; usamos esta porque el ticker está justo al principio del proyecto, pero también puedes activarla con el scroll.
2. Mueve la clase del Collection List Wrapper:
   • Muévela a -100% durante 60 segundos.
   • Pon el easing en linear.
   • Vuelve a 0% al instante cuando termine el movimiento, sin retraso ni duración.
   • Después de guardar, asegúrate de que Loop esté marcado.

Esto creará el efecto de desplazamiento infinito.

Toques finales

• Prueba y ajusta: Previsualiza tu proyecto para comprobar que todo se desplaza con fluidez. Ajusta los tiempos si hace falta.
• Responsive: Comprueba que el ticker sea responsive probándolo en distintos tamaños de pantalla.

Has creado un ticker tape scroller dinámico, impulsado por el CMS, en Webflow. Puedes usarlo para mostrar titulares de noticias, cotizaciones bursátiles, logos o cualquier otra información que quieras desplazar por tu sitio web. La clave está en entender la estructura y las interacciones para lograr un desplazamiento fluido y responsive. Auto width en todo lo que está dentro del wrapper exterior, salvo el collection list item si tiene un ancho fijo, y do not grow or shrink en todos los flex children.

Preguntas frecuentes

¿Cómo creo un ticker tape o una marquesina en Webflow? Crea un scroll wrapper con overflow hidden, coloca dentro un scroll track y, dentro de este, dos Collection List Wrappers idénticos uno al lado del otro, y usa una interacción de page load en bucle que mueva la clase del wrapper de 0% a -100% con easing linear. Los pasos anteriores cubren cada ajuste.

¿Puede un ticker de Webflow funcionar con el CMS? Sí. Como los elementos provienen de una Collection List, puedes añadir o quitar elementos en el CMS y el ticker se adapta, ya sean textos, logos o cotizaciones bursátiles, con anchos fijos o dinámicos.

¿Por qué tengo que duplicar el Collection List Wrapper? La interacción mueve la clase del Collection List Wrapper un 100% hacia la izquierda, así que sin una segunda copia justo detrás verías espacio en blanco hasta que el bucle se reinicie. El duplicado rellena ese hueco para que el ticker parezca interminable.

Puedes descargar el cloneable aquí, y déjame tus preguntas en los comentarios si aún tienes dudas después de revisar el proyecto y el vídeo. También te dejo un enlace al ticker cloneable original del que hablo en el vídeo y que me llevó a crear este. También es un buen ejemplo. ¿Buscas otro truco para el CMS? Prueba la paginación fluida. Por último, no olvides echar un vistazo a nuestros otros how-tos y a los cloneables.