Guías prácticas

Cómo crear un Scroller/Ticker Tape nativo con Webflow CMS

__wf_reservado_decorativo
Cómo crear un Scroller/Ticker Tape nativo con Webflow CMS
June 8, 2024

  · 10 min

En esta publicación, veremos cómo crear un desplazador de cintas ticker con tecnología CMS en Webflow. Puedes seguir mis divagaciones en el vídeo incorporado.

Cómo crear un Scroller/Ticker Tape nativo con Webflow CMS

Al final de la publicación también encontrarás el clonable del proyecto que creé en el vídeo. Voy a empezar con una excusa para el vídeo. Milk Moon Studio es solo un pequeño estudio de webflow, lo que significa que creo muchos de estos para los clientes, lo que significa que probablemente no se me dé muy bien explicar esto, ya que es algo natural a estas alturas.

Por lo tanto, una cinta adhesiva o una barra de desplazamiento, que a menudo se ve en sitios web de noticias o plataformas bursátiles, es una lista que se desplaza continuamente de elementos que se mueven horizontalmente por la pantalla. En Webflow, puede tratarse de texto, imágenes o cualquier cosa que puedas colocar en el CMS y que quieras mover de un lado a otro para siempre. Nuestro objetivo en esta publicación y en este vídeo es crear un ticker responsivo y basado en un CMS que se ajuste en función del contenido, garantizando una experiencia perfecta independientemente del número de elementos. Esta flexibilidad es crucial para el contenido dinámico, en el que el recuento o el ancho de los elementos pueden variar.

Guía paso a paso

Paso 1: Configurar la estructura

En primer lugar, vamos a delinear la estructura.

Ticker Tape or Scroller Structure in Webflow
Estructura de cinta adhesiva o de desplazamiento en Webflow
  1. Sección: Esto lo contendrá todo.
  2. Envoltorio de pergaminos: Esto solucionará el desbordamiento y garantizará que solo se muestre la parte visible del ticker. Es muy importante empaquetarlo todo bien y evitar que la página desborde la ventana gráfica del navegador.
  3. Scroll Track: La pista por la que se desplazarán los elementos.
  4. Envoltorio de listas de colecciones: Vamos a duplicar esto para crear un bucle continuo, básicamente para que no veamos el final de los elementos de la lista de colecciones con espacios en blanco detrás de ellos mientras los movemos por la pantalla.
  5. Lista de colecciones: Aquí es donde se encuentran nuestros artículos dinámicos de CMS.
  6. Elementos de la lista de colecciones: Elementos individuales en el ticker.

Empezaremos creando los contenedores necesarios y, a continuación, configuraremos la interacción.

Paso 2: Crear la sección y el envoltorio de desplazamiento

  1. Agregar una sección: Este será nuestro contenedor principal.

    Vamos a empezar asumiendo que queremos crear un ticker de ancho completo, aunque no tiene por qué ser así y el clonable tiene ambos. Vamos a hacer que la sección sea 100vw.

  2. Añade el envoltorio de pergaminos dentro de la sección:

    Hazlo flexible, horizontal, alineado a la izquierda. (movemos el ticker de derecha a izquierda por la pantalla) y gestionamos el desbordamiento, es decir, el desbordamiento: oculto y con un ancho del 100%.

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

  1. Añadir la pista de desplazamiento dentro del envoltorio del pergamino:

    Establece Flex Child Sizing en: No se encoja ni crezca.
    Hágalo flexible, horizontal, alineado a la izquierda.
    Haga que el ancho sea automático.

  2. Agregar el contenedor de la lista de colecciones dentro de la pista de desplazamiento:

    Vuelva a hacer lo mismo:

    Establece Flex Child Sizing en: No se encoja ni crezca.
    Hágalo flexible, horizontal, alineado a la izquierda.
    Haga que el ancho sea automático.

Paso 4: configurar la lista de colecciones

  1. Lo mismo aquí:
    Establece Flex Child Sizing en: No se encoja ni crezca.
    Hágalo flexible, horizontal, alineado a la izquierda.
    Haga que el ancho sea automático.

Todo esto puede parecer un poco redundante, pero funciona, así que adelante.
Ya te has asegurado de que la cinta adhesiva o el desplazador están configurados y listos para viajar de derecha a izquierda.

Paso 5: Estilizar los elementos de la lista de colecciones

  1. Establece Flex Child Sizing en: No se encoja ni crezca.
  2. Estilízalos según tus necesidades, pero asegúrate de que cualquier estilo en cuanto al ancho, la altura o el acolchado se haga dentro o sobre ellos, no en el exterior. Por ejemplo, no queremos que establezcas el espacio entre los artículos añadiendo un margen, sino que añadas un relleno dentro del artículo. El margen puede provocar un colapso del margen: si se presionan dos márgenes de distintos elementos que se presionan uno contra el otro, se contraen. Al utilizar un relleno en el interior del elemento, se garantiza que el «espacio» se mantenga siempre uniforme.
  3. La mejor parte de crear con el CMS es que puedes diseñar el artículo, por ejemplo, dale un ancho fijo y tendrás una lista de bonitos artículos uniformes del mismo tamaño, desplazándote por la pantalla, o puedes hacer que el contenido del CMS utilizado dentro del artículo determine el ancho. Una lista de logotipos, todos con diferentes anchuras, cada uno en su propio elemento, crearía una bonita lista de logotipos desplazables, pero los elementos no tienen que tener el mismo ancho en este ejemplo que en el anterior. Mostramos ambos en la versión clonable, pero esto hace que sea flexible y simple, y sirve para textos, imágenes, cotizaciones en bolsa, etc. Anchos fijos o dinámicos de los artículos.

Paso 6: Duplicar el contenedor de la lista de colecciones

Duplique el envoltorio de la lista de colecciones para crear un bucle continuo. Nuestra interacción moverá la clase Collection List Wrapper en un 100% a la izquierda y, si no tenemos dos listas de colecciones moviéndose hacia la izquierda, aparecerá un espacio en blanco cuando toda la lista de elementos se mueva a la izquierda.

Paso 7: Agregar la interacción

  1. Ir a Interacciones: En Webflow, crea una nueva interacción de carga de página, la estamos usando porque está justo en la parte superior de nuestro proyecto, pero también puedes activarla al desplazarte.
  2. Mueva la clase Collection List Wrapper:
    • Muévete al -100% en 60 segundos.
    • Defina la flexibilización en lineal.
    • Se restablece al 0% al instante después de completar el movimiento, sin demora ni duración.
    • Después de guardar, asegúrate de que la opción Loop esté marcada.

Esto creará el efecto de desplazamiento infinito.

Toques finales

  • Probar y ajustar: Obtenga una vista previa de su proyecto para asegurarse de que todo se desplace sin problemas. Ajuste el tiempo si es necesario.
  • Capacidad de respuesta: Asegúrate de que el ticker responde probándolo en varios tamaños de pantalla.

Has creado un desplazador dinámico de cintas ticker con tecnología CMS en Webflow. Esta función se puede usar para mostrar titulares de noticias, cotizaciones bursátiles, logotipos o cualquier otra información que desees buscar en tu sitio web. La clave es entender la estructura y las interacciones para garantizar un desplazamiento fluido y responsivo. El ancho es automático en todo el interior del envoltorio exterior, excepto el elemento de la lista de colecciones si tiene un ancho fijo, y no crece ni se encoge en todos los niños flexibles.

Puedes coge el clonable aquí, y deja tus preguntas en los comentarios si aún las tienes después de revisar el proyecto y vídeo. También dejaré un enlace a el ticker original clonable De lo que hablo en el vídeo que me impulsó a construir este. También es un buen ejemplo. Por último, no te olvides de echar un vistazo Nuestros otros tutoriales y clonables.


Compartir

Todas las publicaciones

__wf_reserved_heredar