Scrolling Text Banner CSS

  • Resolved alikin

    (@alikin)


    2 years, 2 months ago

    Hi there,

    I have designed a rolling text banner which currently states:

    Company name | Company name | Company name | Company name Company name |

    I have used this CSS code:

    .slidebanner {
    animation: slideleft 7s infinite linear;
    }

    @keyframes slideleft {
    0% {transform:translate(-100%)}
    100% {transform:translate(100%)}
    }

    The issue I am having is once the text has passed across the screen, there is a blank space before the text scrolls again. If I add more text, the text breaks on to a new line so I end up with two lines of text scrolling across the screen.

    Ideally I need one continuous stream of “Company name” without line breaks and without a pause.

    Could someone offer any guidance on how I can get this to function?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Devinlabs Solutions

    (@devinlabsolutions)

    2 years, 2 months ago

    Hi @alikin

    We need more info about your issue. please provide website page or screenshot.

    Thread Starter alikin

    (@alikin)

    2 years, 2 months ago

    Hi there,

    Thank you for coming back to me. I have recorded a short video to show you what I currently have.

    As you can see, the text scrolls nicely across the screen however once the text has ended, there is blank space until it starts over. I am hoping to be able to get the text to continuously scroll in one long line across the screen constantly. If I add more text, the text breaks onto a new line and I end up with two lines of text scrolling across the screen.

    Any advice would be greatly appreciated!

    Thread Starter alikin

    (@alikin)

    2 years, 2 months ago

    @devinlabsolutions hi! have you had a chance to look at my previous message above? Do you reckon you can help? Any advice would be hugely appreciated. Thank you

    Devinlabs Solutions

    (@devinlabsolutions)

    2 years, 2 months ago

    Hi @alikin,

    To prevent text from breaking into two lines in HTML when adding more text, you can use the CSS property white-space set to nowrap. This property tells the browser not to wrap the text to the next line.

    Instead, it will overflow the container or create a horizontal scrollbar if it exceeds the available width.

    let me know if your problem still not solved.

    Thread Starter alikin

    (@alikin)

    2 years, 1 month ago

    Thank you @devinlabsolutions !

Viewing 5 replies - 1 through 5 (of 5 total)

The topic ‘Scrolling Text Banner CSS’ is closed to new replies.