How to Add Scrolling Text to Your Wix Site

Karen Chin
- 7 min read

Scrolling text is making a comeback. The early web design trend, which rose to prominence in the mid-1990s before falling out of favor around the turn of the millennium, has become a popular addition to many contemporary websites—despite the fact that it’s been considered outdated for nearly 30 years.

The style is a throwback to the early days of the internet, playfully referencing an obsolete style with a self-awareness that feels bold, exciting, and new. The World Wide Web has been around for more than three decades, and though the vast majority of developers continue to welcome newer technologies like React with open arms, an increasing number are looking to the past for inspiration, nostalgic for a time when basic web development didn’t require an intermediate knowledge of JavaScript to create even the most simplistic sites.

Terms like “web brutalism” and “anti-design” have been used to characterize the blocky shapes, gridded layouts, and typography-first approaches so closely associated with this trend. And while the rise of scrolling text has certainly overlapped with the advent of “brutalist” web development, the marquee effect has had a surprising grip on even the non-“brutalist” design world, making appearances on sites for tech conferences, fashion brands, and more.

But why is this outdated trend becoming such a visible part of web development in 2022? What does this say about the future of web design in the 2020s and beyond? And how can you create the marquee effect for yourself using Wix, Velo, and JavaScript?

History of the Marquee HTML Element

The scrolling text effect was introduced in 1996 with Internet Explorer v3. Sometimes called “marquee text” due to its use of the now-deprecated `marquee` element in HTML, the animation served as a functional alternative to the Netscape `blink` tag. Where the non-standard `blink` element allowed designers to make any text flash repeatedly on the page in what its creator has acknowledged could be “extremely annoying,” the `marquee` element set text in motion in a different way, sending it scrolling across the page from left-to-right, right-to-left, top-to-bottom, or bottom-to-top based on parameters included with the tag.

As its name might suggest, the animation was designed to resemble the flashy signage one might see above a movie theater entrance, as part of an eccentric billboard, or in the glistening lights of Times Square. Much like the signs in those places, the tool was quickly adopted by advertisers , who were eager to slather their websites with garrish promotional material. Though it was initially only supported by Internet Explorer, the HTML element was eventually adopted by most major web browsers, and the animation played a significant role in the creation of the first cross-browser web standards.

Scrolling Text in Practice

It’s worth saying up front: Do not use the `marquee` element on your website. It’s obsolete, and while it should still render correctly in contemporary browsers like Firefox, Safari, and Google Chrome as part of their continued support for legacy web pages, the HTML element has been deprecated, meaning that its source code is no longer maintained by web standards organizations like the W3 Consortium.

This lack of consistent maintenance and non-legacy support across browsers can cause designs made with the `marquee` element to render differently from browser to browser. Developers generally try to avoid having to manage how their sites render across browsers, and web standards exist to build cross-browser consistency into their designs, saving developers time and making their jobs considerably easier.

Because the `marquee` element is deprecated, no longer receives cross-browser maintenance, and can render differently from browser to browser, we generally want to avoid using the `marquee` element on our websites.

Rather than use the `marquee` HTML element, we suggest implementing the effect using JavaScript instead.

JavaScript has long been considered the default programming language for front-end web development, allowing you to create animations, manipulate data, connect to APIs, and more in ways that aren’t fully possible with HTML and CSS alone. JavaScript was first created by Netscape’s Brenden Eich in 1995 as a lightweight alternative to languages like Java and C++. It is maintained by the European Computer Manufacturers Association (ECMA), which ensures that the programming language renders consistently across every major browser and provides standardized updates to the language known as ECMAScript.

With over 20 years of support, mass adoption by every major web browser, and ongoing updates and maintenance from ECMA, JavaScript has proven to be one of the most important developments in the history of the web, and it isn’t going away anytime soon. The entire field of web development has become closely associated with JavaScript, and the programming language has formed the basis for so many parts of the modern web—from back-end development with Node.js to front-end libraries and frameworks like React, Angular, Vue and beyond—that it’s hard to imagine another programming language replacing it completely.

Wix makes it easy to create beautiful websites with JavaScript using Velo, our platform for full-stack web development. In the next section, we’ll discuss how to create this scrolling text effect for yourself using Wix, Velo, and JavaScript.

Adding the Scrolling Text Effect to Your Wix Site

There are 2 main approaches for adding this feature to your Wix website.

Method 1: HTML Element

The first method for creating this effect is to use an iframe element. Iframes are HTML elements that allow you to add external HTML snippets to your site, or embed other websites within your page layout.

This approach should be paired with CSS keyframes, which allow you to translate text across the X-axis from Point A to Point B.

HTML

<div id="container">
 <div id="scroll-text">
    This is scrolling text. {Replace with your message here.}
 <div>
</div>

CSS

<style>
   #container {
   /* overflow set to hidden is important or else your text will be visible outside the container and might mess up the width of your page */
   overflow: hidden; 
 }
  #scroll-text {
   text-align: right;
    /* animation properties */
   -moz-transform: translateX(-100%);
   -webkit-transform: translateX(-100%);
   transform: translateX(-100%);
   -moz-animation: scroll-text 15s linear infinite;
   -webkit-animation: scroll-text 15s linear infinite;
   animation: scroll-text 15s linear infinite;
 }
  /* for Firefox */
 @-moz-keyframes scroll-text {
   from { -moz-transform: translateX(-100%); }
   to { -moz-transform: translateX(100%); }
 }
  /* for Chrome */
 @-webkit-keyframes scroll-text {
   from { -webkit-transform: translateX(-100%); }
   to { -webkit-transform: translateX(100%); }
 }
  @keyframes scroll-text {
   from {
     -moz-transform: translateX(-100%);
     -webkit-transform: translateX(-100%);
     transform: translateX(-100%);
   }
   to {
     -moz-transform: translateX(100%);
     -webkit-transform: translateX(100%);
     transform: translateX(100%);
   }
 }
</style>

This approach also has its drawbacks. For one, you have to write CSS browser prefixes for this to work across browsers, which is inconvenient, and doesn’t guarantee that your site will render correctly in browsers not specifically included in your browser prefixes.

This can also make your code slightly clunkier, since writing your code directly in the HTML element means you can’t separate your CSS from the HTML. As your markup grows in length, it can become quite difficult to navigate inside of the iframe, and you aren’t able to access the same debugging tools you have in other parts of the Wix editors. For example, an iframe doesn’t have a built-in linter, meaning that any syntactic errors you write in your code won’t be underlined in red like they are in the Velo IDE.

Iframes are also more computationally expensive than our JavaScript solution, meaning that they require more memory and computing power to run in your browser. This can cause your website to load more slowly, which could also cause issues for users on mobile devices or in countries without high-speed internet connectivity.

This approach could also introduce SEO issues since you’re writing HTML markup inside of the element and not in the Wix editors. It could also limit your site’s accessibility with screen readers and other accessibility devices, since Wix already provides robust support for accessibility through its editors.

For these reasons, you should consider using the JavaScript solution we’ve provided below, rather than solving the problem inside of an iframe.

Method 2: JavaScript and Velo (Preferred)

The best way to create this effect with Wix and Velo is to use the wix-window and wix-animation APIs, which allow you to create this scrolling text effect with just a few short lines of code.

To get started, import the wix-window and wix-animation APIs:

import { timeline } from 'wix-animations';
import wixWindow from 'wix-window';

Next, create a JavaScript function to find the width or height of the window you’re trying to traverse. The wix-window API provides a helpful function called getBoundingRect(), which can be used to find the width or height of your browser. This allows you to define breakpoints for your window, which help ensure that your site looks consistent across browsers of various sizes and dimensions. Knowing the height and width of the browser you’re working with is an essential part of this process, ensuring that your animated text element correctly trails across the browser from endpoint to endpoint.

// Get width of browser for the breakpoint. This will tell us how much the text should scroll

function getWindowSize() {
   return wixWindow.getBoundingRect()
       .then((windowSize) => {
           return windowSize.window.width; 
       })
}

Next, use $w( ) to grab the text element you want to move.

The wix-animation API andTimeline API allow you to set the scrolling speed, width, and visibility using an optional easing parameter. Adding repeat: -1 as a parameter will make it so that the scrolling is infinitely looped.

Within the $w.onReady() function included in the Velo editor by default, write the following code:

let headerScroll = $w('#heading')
let scrollingText = timeline({ repeat: -1 });
   getWindowSize()
      .then((winWidth) => {
          scrollingText.add(headerScroll, {
       // x-axis, for horizontal movement, y is for vertical movements
           x: winWidth,
           duration: 10000,
           easing: 'easeLinear' // optional
           })
          scrollingText.play()
})

You can also add an onMouseIn( ) event handler that stops the scrolling text when a user hovers over it with their cursor. This can make the text easier to read, and help make your site more accessible to users with disabilities.

You can also use other event handlers to attach the scrolling text to the viewport, or stop and start the scrolling text when user’s click on it. There are so many ways to make this effect your own. Challenge yourself to find different approaches to implement this effect.

Have fun coding and designing your site, and be sure to share what you made in our Devs On Wix Discord for feedback, tips, and more!

Helpful Resources: