Question 215478 in Html Question posted in
Some basic documentation can be found here.

Html – How do I have continuous scrolling text on my webpage?

I have been working on coding a webpage for my band and I wanted to have an endless stream of text at the bottom of the page "news channel" style. I thought I was writing it correctly however when I open the webpage the string of text is too long and will line break for a new paragraph, cutting off the rest of the text from visibility. I want each sentence to scroll one after the other in a single line (again "news channel style") But can’t seem to find what is wrong with my code. Any advice?

I tried putting each sentence I wanted to scroll in a but no matter how I break it up the text is too long and forms a paragraph, cutting off the remaining text. I’ll put the relevant code I used below:

HTML:

<div class="ticker-text">
<span>
<span> new music coming soon!! ★ </span>
<span> Next Show: 924 Gilman in Berkeley on June 3rd, 2023 ★ </span>
<span> Listen to our latest EP <a href="https://www.moonwaveca.bandcamp.com/album/death-etc" style="text-decoration: underline; color: #0080FF;">"death, etc"</a> on all streaming platforms!! ★</span>

</span> 
</div>

CSS:

.ticker-text {
height: 45px;   
width: 940px;
overflow: hidden;

}

.ticker-text span {
line-height: 25px;
display: block;
color: #ffffff;
padding: 10px 0px 10px 0px;
font-size: 25px;
animation: scroll-left 20s linear infinite;
}


@keyframes scroll-left {
 0%   {
 transform: translateX(100%);       
 }
 100% {
 transform: translateX(-100%); 
 }
}

@-webkit-keyframes scroll-left {
 0%   {
 -webkit-transform: translateX(100%);       
 }
 100% {
 -webkit-transform: translateX(-100%); 
 }
}

Thank you!!

Tags:

2

Answers


  1. 0

    The issue you are facing is due to the default behavior of the element, which is an inline element and will wrap the text if it exceeds the available width. To achieve the continuous scrolling effect, you need to change the elements to elements or apply a CSS property to make them behave like block-level elements.

    .ticker-text {
  height: 45px;
  width: 940px;
  overflow: hidden;
}

.ticker-text div {
  line-height: 25px;
  display: inline-block;
  /* Change "block" to "inline-block" */
  color: #ffffff;
  padding: 10px 0px;
  font-size: 25px;
  animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@-webkit-keyframes scroll-left {
  0% {
    -webkit-transform: translateX(100%);
  }
  100% {
    -webkit-transform: translateX(-100%);
  }
}
    <div class="ticker-text">
  <div>new music coming soon!! ★</div>
  <div>Next Show: 924 Gilman in Berkeley on June 3rd, 2023 ★</div>
  <div>Listen to our latest EP <a href="https://www.moonwaveca.bandcamp.com/album/death-etc" style="text-decoration: underline; color: #0080FF;">"death, etc"</a> on all streaming platforms!! ★</div>
</div>

    With this update, each sentence will scroll one after the other in a single line as you wanted, "news channel style." The display: inline-block; property ensures that the elements stay on the same line and don’t wrap to form paragraphs.

    Remember to adjust the width of .ticker-text to match your layout’s requirements if needed. Also, make sure to test the result on different screen sizes to ensure it works well responsively.

    Login or Signup to reply.
  2. 0

    I go through your question and derived one answer using the marquee tag and it is working properly.

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .ticker-text {
        height: 45px;
        width: 940px;
        overflow: hidden;
      }

      .ticker-text div {
        line-height: 25px;
        display: inline-block;
        padding: 10px 0px;
        font-size: 25px;
      }
    </style>
  </head>
  <body>
    <h1>I am in HTML Item</h1>
    <marquee class="ticker-text">
      <div>new music coming soon!! ★</div>
      <div>Next Show: 924 Gilman in Berkeley on June 3rd, 2023 ★</div>
      <div>
        Listen to our latest EP
        <a
          href="https://www.moonwaveca.bandcamp.com/album/death-etc"
          style="text-decoration: underline; color: #0080ff"
          >"death, etc"</a
        >
        on all streaming platforms!! ★
      </div>
    </marquee>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search