Aviso de accesibilidad: un texto en movimiento puede distraer y resultar difícil de leer para algunas personas. Antes de implementar un marquee considera si el contenido es adecuado y ofrece alternativas accesibles.
Introduccion: en este articulo explico como crear un efecto de texto que se desplaza de forma horizontal y vertical usando HTML CSS y JavaScript. La idea base es mover elementos con transform translateX para desplazamiento horizontal y translateY para desplazamiento vertical y repetir el contenido para crear un bucle infinito.
Concepto basico: coloca el texto en un contenedor y aplica una animacion CSS que modifique transform translateX desde 0 hasta un porcentaje negativo. Para lograr un desplazamiento continuo duplica el bloque de texto dentro del mismo contenedor de modo que cuando la primera copia salga de vista la segunda ocupe su lugar creando un bucle sin saltos.
Estructura simplificada: usa contenedores separados para la banda horizontal y para la columna vertical. Cada contenedor interno deberia contener dos copias del conjunto de items para que el movimiento se perciba continuo. En JavaScript puedes generar dinamicamente los elementos y las duplicaciones, lo que ofrece flexibilidad para cambiar textos o añadir separadores decorativos como iconos o estrellas.
JavaScript dinamico: selecciona los contenedores de desplazamiento y recorre un array de frases. Por cada frase crea un elemento span con la clase adecuada y anadelo al contenedor. Repite la insercion para asegurar que haya al menos dos copias del conjunto. Este metodo evita escribir manualmente muchos elementos y facilita internacionalizacion o actualizaciones en tiempo real.
Animacion horizontal en CSS: define una regla keyframes que transforme translateX desde 0 hasta minus un porcentaje que represente la mitad o la anchura necesaria para que la segunda copia reemplace a la primera. Aplica la animacion con una duracion adecuada, por ejemplo 25s linear infinite para velocidad constante y repeticion infinita.
Animacion vertical en CSS: la logica es la misma pero usando translateY. Para texto dispuesto en columna es util ajustar display flex y flex direction column. Si deseas que las palabras se muestren rotadas o en orientacion vertical usa propiedades de escritura como writing mode y complementa con transform rotate para que los caracteres se vean en la direccion correcta.
Consideraciones de estilo: utiliza display flex para alinear elementos en fila o columna segun corresponda. Aumenta el tamano de fuente y el peso para dar impacto visual. Evita que los items se encojan aplicando flex shrink 0 cuando el contenedor sea mas pequeno. Mantén overflow hidden en el contenedor padre para evitar barras de desplazamiento indeseadas.
Accesibilidad y buenas practicas: ofrece mecanismos para pausar la animacion, preferiblemente mediante prefer reduced motion o controles visibles. Asegurate de que el contenido importante no dependa exclusivamente del movimiento y que lectores de pantalla puedan acceder al texto original en un elemento alternativo o mediante atributos ARIA cuando sea necesario.
Aplicaciones practicas: estos efectos son utiles para destacar servicios, titulares o logotipos de clientes, pero deben usarse con moderacion para no restar usabilidad. Funcionan en interfaces promocionales, landing pages o paneles informativos junto a soluciones de visualizacion de datos como Power BI.
Sobre Q2BSTUDIO: Q2BSTUDIO es una empresa de desarrollo de software y aplicaciones a medida especializada en inteligencia artificial ciberseguridad y servicios cloud AWS y Azure. Ofrecemos software a medida y aplicaciones a medida pensadas para optimizar procesos de negocio. Desarrollamos soluciones de inteligencia de negocio e implementamos power bi para visualizacion avanzada. Tambien creamos agentes IA e implementaciones de ia para empresas que automatizan tareas y generan valor con modelos personalizados.
Servicios destacados de Q2BSTUDIO: desarrollo de software a medida, aplicaciones a medida, consultoria en inteligencia artificial, integracion de agentes IA, ciberseguridad gestionada, servicios cloud AWS y Azure, implementacion de servicios inteligencia de negocio y dashboards con power bi. Si necesitas una demo o una consultoria, podemos analizar tu caso y proponer una estrategia que combine IA para empresas y practicas de seguridad en la nube.
Resumen y siguiente paso: con una combinacion de CSS keyframes duplicacion de contenido y JavaScript para inyeccion dinamica puedes crear efectos de texto desplazable tanto horizontales como verticales y mantenerlos infinitos y fluidos. Recuerda priorizar accesibilidad y rendimiento. Contacta a Q2BSTUDIO para desarrollar soluciones personalizadas que integren estos efectos con tus sistemas backend, servicios cloud y capacidades de inteligencia artificial.
.jpg)
.jpg)