Avís d'accessibilitat: un text en moviment pot distreure i resultar difícil de llegir per a algunes persones. Abans d'implementar un marquee considera si el contingut és adequat i ofereix alternatives accessibles.
Introducció: en aquest article explico com crear un efecte de text que es desplaça de forma horitzontal i vertical usant HTML CSS i JavaScript. La idea base és moure elements amb transform translateX per a desplaçament horitzontal i translateY per a desplaçament vertical i repetir el contingut per crear un bucle infinit.
Concepte bàsic: col·loca el text en un contenidor i aplica una animació CSS que modifiqui transform translateX des de 0 fins a un percentatge negatiu. Per aconseguir un desplaçament continu duplica el bloc de text dins del mateix contenidor de manera que quan la primera còpia surti de vista la segona ocupi el seu lloc creant un bucle sense salts.
Estructura simplificada: usa contenidors separats per a la banda horitzontal i per a la columna vertical. Cada contenidor intern hauria de contenir dues còpies del conjunt d'ítems perquè el moviment es percebi continu. En JavaScript pots generar dinàmicament els elements i les duplicacions, cosa que ofereix flexibilitat per canviar textos o afegir separadors decoratius com icones o estrelles.
JavaScript dinàmic: selecciona els contenidors de desplaçament i recorre una matriu de frases. Per cada frase crea un element span amb la classe adequada i afegeix-lo al contenidor. Repeteix la inserció per assegurar que hi hagi almenys dues còpies del conjunt. Aquest mètode evita escriure manualment molts elements i facilita la internacionalització o actualitzacions en temps real.
Animació horitzontal en CSS: defineix una regla keyframes que transformi translateX des de 0 fins a menys un percentatge que representi la meitat o l'amplada necessària perquè la segona còpia reemplaci la primera. Aplica l'animació amb una durada adequada, per exemple 25s linear infinite per a velocitat constant i repetició infinita.
Animació vertical en CSS: la lògica és la mateixa però usant translateY. Per a text disposat en columna és útil ajustar display flex i flex direction column. Si desitges que les paraules es mostrin rotades o en orientació vertical usa propietats d'escriptura com writing mode i complementa amb transform rotate perquè els caràcters es vegin en la direcció correcta.
Consideracions d'estil: utilitza display flex per alinear elements en fila o columna segons correspongui. Augmenta la mida de font i el pes per donar impacte visual. Evita que els ítems s'encongeixin aplicant flex shrink 0 quan el contenidor sigui més petit. Mantén overflow hidden en el contenidor pare per evitar barres de desplaçament no desitjades.
Accessibilitat i bones pràctiques: ofereix mecanismes per pausar l'animació, preferiblement mitjançant prefer reduced motion o controls visibles. Assegura't que el contingut important no depengui exclusivament del moviment i que lectors de pantalla puguin accedir al text original en un element alternatiu o mitjançant atributs ARIA quan sigui necessari.
Aplicacions pràctiques: aquests efectes són útils per destacar serveis, titulars o logotips de clients, però s'han d'usar amb moderació per no restar usabilitat. Funcionen en interfícies promocionals, landing pages o panells informatius juntament amb solucions de visualització de dades com Power BI.
Sobre Q2BSTUDIO: Q2BSTUDIO és una empresa de desenvolupament de programari i aplicacions a mida especialitzada en intel·ligència artificial ciberseguretat i serveis cloud AWS i Azure. Oferim programari a mida i aplicacions a mida pensades per optimitzar processos de negoci. Desenvolupem solucions d'intel·ligència de negoci i implementem power bi per a visualització avançada. També creem agents IA i implementacions d'ia per a empreses que automatitzen tasques i generen valor amb models personalitzats.
Serveis destacats de Q2BSTUDIO: desenvolupament de programari a mida, aplicacions a mida, consultoria en intel·ligència artificial, integració d'agents IA, ciberseguretat gestionada, serveis cloud AWS i Azure, implementació de serveis d'intel·ligència de negoci i dashboards amb power bi. Si necessites una demo o una consultoria, podem analitzar el teu cas i proposar una estratègia que combini IA per a empreses i pràctiques de seguretat al núvol.
Resum i següent pas: amb una combinació de CSS keyframes duplicació de contingut i JavaScript per a injecció dinàmica pots crear efectes de text desplaçable tant horitzontals com verticals i mantenir-los infinits i fluids. Recorda prioritzar accessibilitat i rendiment. Contacta Q2BSTUDIO per desenvolupar solucions personalitzades que integrin aquests efectes amb els teus sistemes backend, serveis cloud i capacitats d'intel·ligència artificial.
