Scrolling text

General topics
1

Hello, does anyone know how I can have continuous horizontal scrolling text from the right of the page to the left?

For example, like the text at the top of this page: https://publicofficial.co

1 Like
2

Hi

  1. You need to type this text multiple times in a row (Use Cmd+/- for more convenience)
  2. Enable On Load animation → Choose Move option → And move text left or right to make it cover the same phrase (Use Shift while dragging to move text only horizontally)
  3. Enable Loop = Cycle option

Screenshot 2022-07-13 at 18.16.20
Screenshot 2022-07-13 at 18.16.202876×1378 206 KB

2 Likes
3

Hey @Misha another readymag user here. I found your explantion super helpful, however I am experiencing one issue. I took your advice about typing the text multiple time in a row, but eventually, the text runs out- I would imagine I would have to repeat like 100 plus time for it not to cut off. Is there anyway around this?

4

Hi @dennerk it sounds like in this instance a code injection element might be the better option. I’ve linked the code from this thread [marquee](How do you create marquee text?)

<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>
5

Hey, I am new to coding, but would love to transform text to a different style on this animation. Is there any way to do this? Changing Font, font style, font size and so on?
Thanks!

6

One solution would be to insert a scrolling text GIF image made with this online tool.

7

Hi! You can use our preset: click Widgets - Presets - Animated widgets - Infinite running line. Then customize the text as you’d like using text settings that will pop up in the panel on the right :blush: