How do you create marquee text?

Custom code
1

Just wondering how to create this using animations? Or is it just easier/quicker to do this with code?

Thanks!

1 Like
2

Hi @Jess_MacDonald, there are a couple ways to do this. You could create a Marquee effect using a large text block and having it move on scroll or on load.

If you want something more dynamic, for example stopping on hover or having it loop perfectly you could go the code route. I have put a rough example here that you can style!

<div class="marquee">
  <div>
    <span><a href="URL HERE?">HELLO WORLD THE MESSAGE CAN BE ANY LENGTH. MESSAGE 1.</a></span>
    <span><a href="URL HERE?">HELLO WORLD THE MESSAGE CAN BE ANY LENGTH. MESSAGE 2.</a></span>
  </div>
</div>

<style>
  body {
    margin: 20px;
  }

  .marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 25px;
  }

  .marquee div {

    position: absolute;
    display: block;
    overflow: hidden;
    width: 200%;
    height: 30px;
    animation: marquee 10s linear infinite;
  }

  .marquee span {
    float: left;
    width: 50%;
  }

  @keyframes marquee {
    0% {
      left: 0;
    }

    100% {
      left: -100%;
    }
  }
</style>
2 Likes
3

Going for the loop version so this code is perfect. Thank you.

1 Like
4

Hi @HEADLESS.HORSE iā€™ve used your code on my site and its great, but on IOS its not showing the custom font.

Any idea where I am going wrong? Thanks in advance.

ā€“

TAKING A BREAK? HIATUS BEERS. FULL-FLAVOURED, REFRESHING, NON-ALCOHOLIC BEER. TAKING A BREAK? HIATUS BEERS. FULL-FLAVOURED, REFRESHING, NON-ALCOHOLIC BEER. TAKING A BREAK? HIATUS BEERS. FULL-FLAVOURED, REFRESHING, NON-ALCOHOLIC BEER.
body { margin: 0px; } .marquee { position: relative; overflow: hidden; width: 100%; height: 25px; font-family: 'Vacation-Heavy' !important; font-size: 16px; color: #224FA2; } @media (min-width:320px) { .marquee { position: relative; overflow: hidden; width: 100%; height: 25px; font-family: Vacation-Heavy.woff2 !important; font-size: 16px; color: #224FA2; } .marquee div { position: absolute; display: block; overflow: hidden; width: 200%; height: 30px; animation: marquee 10s linear infinite; } .marquee span { float: left; width: 30%; } @keyframes marquee { 0% { left: 0; } 100% { left: -100%; } }
5

Hi there! Is there any variant to make the same infinity animation with pictures?

Example: Exampe

Thanks in advance!

1 Like
6

@nongvaleria This! How do we do this!? Iā€™ve tried to copy the animation details from ā€œInfinite Running Lineā€ preset, but it doesnā€™t work. The marquee starts out slow, gradually finds a consistent pace, then when it gets to the end it slows down, completely exits the page, then starts over on the other side of the page instead of linking up into one continuous looping marquee.

7

Okay, I actually figured it out! Well, readymagā€™s youtube ended up being pretty helpful actually. I watched this video (starts at 10:38ish) and realized that when I applied the ā€˜Loadā€™ > ā€˜Moveā€™ animation specs from ā€œInfinite Running Lineā€, your original text (or sequence of images in my case, all grouped together) becomes translucent, and then you get this solid fill duplicate of the original, as with any ā€˜Moveā€™ animation. If your repeating text was ā€œI canā€™t wait to go to the beachā€, then youā€™d want to move the second or third ā€œI canā€™t wait to go to the beachā€ in your solid fill text box so your solid fill overlay lines up perfectly with the beginning of the translucent text. I hope that makes sense. You better just watch the video haha.

But then to address the reason as to why mine was starting out slow and then gradually stopping instead of looping continuously, it was honestly so dumb haha. Right between ā€˜Delayā€™ / ā€˜Durationā€™ and the ā€˜Moveā€™ button, is where you can adjust whether your animation fades in/out, is linear/consistent, etc., and mine was set to ā€˜ease in and out.ā€™ Derp. Go figure, when I clicked ā€˜linearā€™ it suddenly became smooth and consistent and remained continuous.

Anyway, hope that helps someone!

1 Like