Website animations have been around for a long time, but when every company has a sleek, trendy website, it’s even more important to make your clients’ sites stand out.
That’s where a text marquee (a line of scrolling text, like a news ticker) comes in. Use it to spruce up your designs, shout out a sale, encourage newsletter signups or make an announcement. And with Wix Studio's text marquee feature, adding and customizing this text is a breeze.
Read on to see how this engaging effect can add character to your clients’ websites, plus how to make the most of the feature.
But first, what is a text marquee?
A text marquee—sometimes called marquee text—is a dynamic element on a website that displays text scrolling either horizontally or vertically across the screen. Also referred to as a "ticker" or "news ticker," it's frequently used to present continuous news updates or sales at the top or bottom of a webpage. Incorporating text marquees can captivate viewers and offer a more dynamic website experience, making the element an excellent complement to other components such as images, buttons and static text.
Traditionally, marquees were achieved in html with the <marquee> tag, and the effect could only be created using code. Now, with Wix Studio, it’s as simple as dragging the text marquee feature onto your canvas, entering the text you want to display and selecting the speed and direction.
What makes text marquees so cool?
There are many adjustments you can make to elevate the look and feel of your clients’ website, like choosing the right professional fonts to drawing inspiration from design system examples. Text marquees are one such adjustment because they inject dull, static visuals with energy. Movement is the antithesis of boredom.
Put your text on an infinite treadmill to command attention and keep people on the webpage longer. Text marquees make for a visual page break, and they can also be set to run diagonally or vertically on the screen, not just horizontally.
Examples of the text marquee in action
The best way to make use of running text is to first get a sense of how others are using it on their own websites. When you see what’s possible, you’ll have a better clue how to use the feature in your own designs.
01. Studio LA
This text marquee example almost feels like a moving cut-out given the brand’s use of Lostar as their font, as well as the way the banner pops against the white background (which is the same color as the text). It appears again below, as a section with downward facing arrows that scroll across the screen while pointing to statistics that support the brand messaging.
02. Ciao Tattoo
Can the text marquee feature imply the passage of time? That’s what tattoo laser removal brand Ciao Tattoo uses it for, inviting you to make your tattoos a thing of the past. There are two text marquees on this website: one on the homepage that reads "towards a new start" and the other introducing the brand’s ‘special opening offer in Nice’ in the prices section. In each case, the text marquee differentiates one section from another, adding a sense of flow between sections with different ideas.
The use of text marquee is subtle on this website, but it’s just enough to add a hint of flair. Sprightly Creatives uses this feature to announce that they’re accepting new clients (which links to an inquiry form), as well as a fun way to link out to their Instagram page. For an extra design touch, the text marquee stops on hover, a small but satisfying interaction.
04. Rivex Wellness
This powdered supplement brand features scrolling text below the navigation bar to call out their free shipping and to highlight their exclusive welcome kit, both of which encourage a purchase. Also note how the custom cursor is similar to the icon in the text marquee, another nuance that reinforces the branding.
05. Giant Bars
The Giant Bars brand uses the text marquee feature subtly. The panning text invites you to "shop the range" and reads "home of the giant," but it doesn’t have any interactions or eye popping effects. Rather, it’s a nod to the idea that a little movement goes a long way.
How to use the text marquee feature
Adding and customizing a text marquee is effortless with your Wix Studio design tools. In the site editor, click ‘+ add elements’ and navigate to the text section to find the text marquee element. From here, drag a basic design you like onto your page, then change it to your liking.
You can further design the text marquee element by selecting it, clicking the ‘open inspector’ icon at the top of the editor, and then picking and choosing what you’d like to change: the text itself, separator icons between the ends of sentences, and the scroll movement (speed and direction), as well as whether the text pauses on hover.
Get started on Wix Studio to build sites with no-code effects and animations.
