How to add text dynamically to marquee on html with javascript

Question

I wonder how to add text marquee dynamically, I have tried to using marquee tags like this :

<marquee scrollamount="5" loop="infinite" id="paragraph"> This is sample of my marquee </marquee>

and I append text like this :

document.getElementById("paragraph").innerHTML += ' This is how I to append text';

It's working but the problem is when I append text to marquee the first animation not working properly (text from right to left not finish and start looping again), so marquee only running until text before it's append and loop and when animation start loop, then the marquee animation runs all text (text from right to left finish until its finish and disappear then loop again)

And I have also tried make marquee using keyframes like this:

function AppendData(){
          
            document.getElementById("marquee").innerHTML += 'This is how i append data to marquee';
            
        }

@keyframes marquee {
          0%   { text-indent: 100% }
          100% { text-indent: -100% }
      }

      @-webkit-keyframes marquee {
          0%   { text-indent: 100% }
          100% { text-indent: -100% }
      }

      .marquee {
          overflow: hidden;
          white-space: nowrap;
          animation: marquee 17s linear infinite;
          -webkit-animation: marquee 17s linear infinite;
      }

      .marquee:hover {
          -webkit-animation-play-state: paused;
          animation-play-state: paused;
      }

<button onclick="AppendData()">Append Data</button>

<p class="marquee" id="marquee">This is my marquee not using marquee tags but using the keyfames by css.</p>

but the problem is same with using marquee tags, because 100% { text-indent: -100% } not dynamic.

My question is how to make marquee runs dynamically until finish or disappear from left to right when I append text in the first running marquee?

[``](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMarqueeElement): _"**Deprecated - This feature is no longer recommended**. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. **Avoid using it, and update existing code if possible**;"_ — Andreas, Apr 30 '20 at 06:38
: _" alternative"_ -> [Why is deprecated and what is the best alternative?](https://stackoverflow.com/questions/31951282/why-is-marquee-deprecated-and-what-is-the-best-alternative) — Andreas, Apr 30 '20 at 06:44
@Andreas i have tried using css animation keyframes, but the problem is the same, can you give me some solution, cause i have searching for solution but until now i haven't find yet. thanks — Smith, Apr 30 '20 at 06:51

otejiri · Answer 1 · 2020-04-30T08:25:00.803

0

This should work

function AppendData(){
                e = document.querySelector('.marquee');
                
                    document.querySelector("span").append("new data")
                 
             }

.marquee span {
  display: inline-block;
  white-space:nowrap;
  padding-left: 100%;
  will-change: transform;
  /* show the marquee just outside the paragraph */
  animation: marquee 5s linear infinite;
}

.marquee span:hover {
  animation-play-state: paused
}


/* Make it move */

@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}


/* Respect user preferences about animations */

@media (prefers-reduced-motion: reduce) {
  .marquee { 
    white-space: normal 
  }
  .marquee span {
    animation: none;
    padding-left: 0;
  }
}

<button onclick="AppendData()">Append Data</button>

<div class="marquee" style="overflow: show">
            <span>
                This is my marquee not using marquee tags but using the keyfames by css.
            </span>
            </div>

edited Apr 30 '20 at 08:25

answered Apr 30 '20 at 07:25

otejiri

1,017
6
20

I want to make one line marquee and connect from each text that I append without gaps. – Smith Apr 30 '20 at 07:35
@Brianjack edited the length and also the iteration to fire once onclick. You can specify scroll speen in css – otejiri Apr 30 '20 at 08:09
but you append text after it done loop, can you make text append although marquee still running? – Smith Apr 30 '20 at 08:18
but why everytime i append text the speed more faster? and when text append the first text it's like being pushed by the text from the append? – Smith Apr 30 '20 at 08:34
marquee is moving left and you are adding new texts, the animation timer works with the length of the text, the shorter it is, the longer it takes to complete the animation – otejiri Apr 30 '20 at 08:43
what if i add the width everytime i append text, it's that okay? because i will be using a lot of text to show in marquee without restarting loopin? – Smith Apr 30 '20 at 08:51
@Brianjack no harm in trying – otejiri Apr 30 '20 at 08:54

How to add text dynamically to marquee on html with javascript

1 Answers1