Accessibility notice: moving text can be distracting and difficult to read for some people. Before implementing a marquee, consider whether the content is appropriate and offer accessible alternatives.
Introduction: in this article I explain how to create a text effect that moves horizontally and vertically using HTML, CSS and JavaScript. The basic idea is to move elements with transform translateX for horizontal movement and translateY for vertical movement, and repeat the content to create an infinite loop.
Basic concept: place the text in a container and apply a CSS animation that modifies transform translateX from 0 to a negative percentage. To achieve continuous movement, duplicate the text block inside the same container so that when the first copy goes out of view, the second takes its place, creating a seamless loop.
Simplified structure: use separate containers for the horizontal band and the vertical column. Each inner container should contain two copies of the set of items so that the movement is perceived as continuous. In JavaScript, you can dynamically generate the elements and duplicates, which offers flexibility to change texts or add decorative separators such as icons or stars.
Dynamic JavaScript: select the scrolling containers and loop through an array of phrases. For each phrase, create a span element with the appropriate class and add it to the container. Repeat the insertion to ensure there are at least two copies of the set. This method avoids manually writing many elements and facilitates internationalization or real-time updates.
Horizontal animation in CSS: define a keyframes rule that transforms translateX from 0 to minus a percentage representing half or the necessary width for the second copy to replace the first. Apply the animation with an appropriate duration, for example 25s linear infinite for constant speed and infinite repetition.
Vertical animation in CSS: the logic is the same but using translateY. For text arranged in a column, it is useful to adjust display flex and flex direction column. If you want the words to be displayed rotated or in vertical orientation, use writing properties such as writing mode and complement with transform rotate so that the characters appear in the correct direction.
Style considerations: use display flex to align elements in a row or column as appropriate. Increase font size and weight for visual impact. Prevent items from shrinking by applying flex shrink 0 when the container is smaller. Keep overflow hidden on the parent container to avoid unwanted scrollbars.
Accessibility and best practices: provide mechanisms to pause the animation, preferably through prefers-reduced-motion or visible controls. Ensure that important content does not rely exclusively on movement and that screen readers can access the original text in an alternative element or through ARIA attributes when necessary.
Practical applications: these effects are useful for highlighting services, headlines, or client logos, but should be used in moderation to avoid reducing usability. They work in promotional interfaces, landing pages, or informational dashboards alongside data visualization solutions such as Power BI.
About Q2BSTUDIO: Q2BSTUDIO is a custom software and application development company specialized in artificial intelligence, cybersecurity, and AWS and Azure cloud services. We offer custom software and custom applications designed to optimize business processes. We develop business intelligence solutions and implement Power BI for advanced visualization. We also create AI agents and AI implementations for companies that automate tasks and generate value with custom models.
Featured services from Q2BSTUDIO: custom software development, custom applications, artificial intelligence consulting, AI agent integration, managed cybersecurity, AWS and Azure cloud services, business intelligence service implementation, and dashboards with Power BI. If you need a demo or consulting, we can analyze your case and propose a strategy that combines AI for businesses and cloud security practices.
Summary and next step: with a combination of CSS keyframes, content duplication, and JavaScript for dynamic injection, you can create horizontal and vertical scrolling text effects and keep them infinite and fluid. Remember to prioritize accessibility and performance. Contact Q2BSTUDIO to develop custom solutions that integrate these effects with your backend systems, cloud services, and artificial intelligence capabilities.
