Looking to add an eye-catching scrolling text animation to your Showit website? Whether you call it a scrolling banner, a moving headline, or an endless ticker, this type of animation is called an infinite scrolling marquee. It’s a simple way to add movement and visual interest to your pages, and is commonly used in announcement bars, or as design accents.

We’ll walk you through exactly how to create a smooth, continuous scrolling marquee effect in Showit using a little bit of custom code. Plus, if you prefer a no-code option, we’ve got an alternative for you too!

We’ve even got a free Showit canvas you can grab to use and make the whole process a little bit easier.

What You Will Need

• A Showit account with a published or unpublished site
• A basic understanding of where to paste embed code inside Showit
• Your desired text for the marquee
• Optional: your brand font uploaded to Showit

Step 1: Copy the Marquee Code

Here is the custom code you will be using:

<div class="si-embed"><style>
.marquee {
  display: flex;
  overflow: hidden;
  gap: 1rem;
  position: relative;
  user-select: none;
}
.marquee-content {
  flex-shrink: 0;
  display: flex;
  justify-content: space-around;
  color: #000;
  font-family: syne;
  font-weight: 600;
  text-transform: uppercase;
  line-height: 1.2em !important;
  font-size: 13px;
  letter-spacing: 2px;
  min-width: 100%;
  gap: 1rem;
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-100% - 1rem));
  }
}
.scroll {
  animation: scroll 60s linear infinite;
}
</style>

<div class="marquee">
  <div class="marquee-content scroll">
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
  </div>
  <div class="marquee-content scroll">
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
    <div>SERVICES</div>
    <div>•</div>
  </div>
</div>
</div>

---

Step 2: Add an Embed Code Element in Showit

• In Showit, click into the page or canvas where you want the marquee to appear.
• Drag an Embed Code element onto the page.
• Open the Embed Code settings and paste the code above inside the box.
• Click Save.

At this point, you will probably see your scrolling text appear in the preview window. It might look a little bit funky at first! Don’t worry.

---

Step 3: Customize the Settings

You can customize the look of your marquee by editing the code:

• Font: Change font-family: syne; to your preferred font.
  Important: The font must already be used elsewhere on the page in regular Showit text boxes to render properly. Inside the Showit editor, the font might not look correct, but when you preview or publish the page, it should display correctly.
• Font Size: Adjust the font-size: 13px; value to make the text larger or smaller.
• Speed: Change animation: scroll 60s linear infinite; to a faster or slower time by adjusting the number. A lower number will scroll faster.
• Spacing: Adjust the gap: 1rem; value to control the space between words or icons.

Play around until it matches the style of your site.

---

No Code Alternative: How to Simulate Scrolling Text Using Showit Animations

If you are not comfortable adding custom code, you can still achieve a similar effect using Showit’s built-in tools.

Here is how to simulate scrolling text without code:

1. Create a long text box with repeated words or phrases.
   For example, “Services • Services • Services • Services.” (It need to be REALLY REALLY long)
2. Open the Animation settings for the text box.
3. Set the animation type to Slide and the direction to Left.
4. Set a long transition time, such as 20 to 30 seconds(or more!), to make the scroll slow and smooth.

Heads up:
Because this is a simple animation, the text will eventually stop once it has finished sliding across the screen. You might also notice slight changes in speed as it starts and ends. For a truly endless, smooth scroll, using the custom code method is the best choice.

---

Common Questions About Creating a Infinite Scrolling Marquee in Showit

How do I change the scrolling speed?
Adjust the 60s value in the animation property. Lower numbers mean faster scrolls!

Why is my font not showing up correctly in Showit?
Custom fonts in code blocks only work if the font is already loaded on the page using a regular Showit text box. Always double-check the preview or published version.

Can I change the text to something besides “Services”?
Yes, replace the word “SERVICES” inside the code with any words or phrases you want.

Will this work on mobile?
Yes, but you may want to adjust the font size smaller for mobile layouts inside Showit to ensure it looks good on all devices.

Can I stack multiple marquees on the same page?
Yes, just add another Embed Code element and paste the code again with any new settings or text changes you want.

---

Save Time: Download the Free Pre-Built Scrolling Marquee Site Canvas

Want to skip the copy and paste? We created a free downloadable Showit site canvas that already includes this infinite scrolling marquee. You can easily upload it into your account, customize your text and styling, and be on your way in minutes.

Want to save even more time?

Check out our Showit Website Templates that use the scrolling marquee feature!