How to infinitely scroll horizontal text with Javascript?

user_13253582 0
Viewed 3095

I want to infinitely scroll the title of a song horizontally within a box. I repeated the title of the song after itself and hid the overflow so it gives the illusion of an infinite scroll, but the result is really choppy.

It is supposed be like on a car dashboard, where the song title/artists loops if the area can't fit the whole text.

[Codepen](https://codepen.io/safiajeff/pen/MWJQOPv)

How can I make it smoother/infinite?

scroll css text html javascript
2 Answers

Given you already have two copies of the heading you can use CSS rather than JS to scroll.

The two headings are one after the other on the same line. If you transform their container to the left by 50% the second version will be at left: 0. Then immediately the first version goes to the same place and you don't see any jerkiness.

Not only is this fairly simple, just an added CSS keyframes definition and no JS, but also it is lighter on both CPU and GPU usage, thus saving your user's battery.

section{
  overflow :hidden;
  width: 150px;
  display:inline-block;
  border: 1px solid red;
  height: 50px;
  white-space: nowrap;
}

div{
  width: 566px;
  display: flex;
  flex-wrap: nowrap;
  animation: move 2s infinite linear; /* set the time to what you want of course */
}
@keyframes move {
  to {
    transform: translateX(-50%);
  }
}
h1{
  font-size: 20px;
  margin:0;
  padding-left:0px;
  border: 1px solid blue;
  width:283px;
}
<section>
  <div id="container">
    <h1>Simon Dominic - At Night</h1>
    <h1>Simon Dominic - At Night</h1>
  </div>
</section>

user_108674540

the <marquee> html tag does the trick!

heres the doc:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

Edit: for those who complain about deprecation, then implement it in CSS. The only ones to have so far dropped support for marquee is firefox, and for now it does the trick on most browsers so why reinvent the wheel?

<html>

<body>
    <style style="text/css">
        .marquee {
            height: 50px;
            overflow: hidden;
            position: relative;
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;
        }
        
        .marquee p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(100%);
            -webkit-transform: translateX(100%);
            transform: translateX(100%);
            -moz-animation: scroll-left 2s linear infinite;
            -webkit-animation: scroll-left 2s linear infinite;
            animation: scroll-left 20s linear infinite;
        }
        
        @-moz-keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
            }
        }
        
        @-webkit-keyframes scroll-left {
            0% {
                -webkit-transform: translateX(100%);
            }
            100% {
                -webkit-transform: translateX(-100%);
            }
        }
        
        @keyframes scroll-left {
            0% {
                -moz-transform: translateX(100%);
                -webkit-transform: translateX(100%);
                transform: translateX(100%);
            }
            100% {
                -moz-transform: translateX(-100%);
                -webkit-transform: translateX(-100%);
                transform: translateX(-100%);
            }
        }
    </style>

    <div class="marquee">
        <p> Marquee in CSS </p>
    </div>
</body>

</html>

https://www.w3schools.in/css3/css-marquee/

user_63270860
Related