Moving a paragraph from left edge of a div to right edge in ES6 (text should be deleted and reappear)

Question

Sorry if I misphrase anything, not sure how to phrase the need I'm having.

Say I have a paragraph inside a div:

<div style="width: 50px">
    <p>Hi</p>
</div>

I want to move the paragraph (which covers 0-2px), up until the 50px.
When it reaches 49/50, 1 letter will be gone.
When it reaches 50/50, all 2 letters be gone, and the same behavior will start again, from scratch...

To clarify: I mean to create these "old school" moving text bars, in which a text starts in the right edge of the bar, and moves pixel after pixel, in some speed, to the left edge, disappears, and again the same pattern.

I didn't find any code for "moving a text" (surly not in ES6) [1], [2]. Most of what I found is in Jquery, like this article, but I desire an ES6 vanilla solution.

Can you provide any animation/videos about what you want to achieve? — AngYC, Nov 06 '17 at 07:14
post some code snippet of what you tried in order to help you — Ali Ezzat Odeh, Nov 06 '17 at 07:14
I didn't try anything. I don't know how to move html objects on the screen with JS. — Osi, Nov 06 '17 at 07:17
Yes @AngYC you can see an example to the moving text here (http://walla.co.il), directly in the home page from a PC, you could see moving text "מבזקים". — Osi, Nov 06 '17 at 07:18
Yes I didn't know this is exactly the right term. I now understand there are several types of marquee. — Osi, Nov 06 '17 at 08:50

score 4 · Accepted Answer · answered Nov 06 '17 at 08:31

You can achieve that with CSS animations:

div {
  overflow: hidden;
}

p {
  animation: marquee 2s linear infinite;
}

@keyframes marquee {
  from {transform: translateX(-100%); }
  to {transform: translateX(100%); }
}

<div style="width: 50px">
    <p>Hi</p>
</div>

score 0 · Answer 2 · answered Nov 06 '17 at 07:50

I updated an old Javascript solution on SO below:

const marquees = [...document.querySelectorAll('.marquee')];
marquees.forEach((marquee) => {
  marquee.innerHTML = marquee.innerHTML + '&nbsp;'.repeat(5);
  marquee.i = 0;
  marquee.step = 3;
 marquee.width = (marquee.clientWidth + 1);
  marquee.style.position = '';
  marquee.innerHTML = `${marquee.innerHTML}&nbsp;`.repeat(10);
  marquee.addEventListener('mouseenter', () => marquee.step = 0, false);
  marquee.addEventListener('mouseleave', () => marquee.step = 3, false);
});

setInterval(move, 50);

function move() {
  marquees
  .forEach((marquee) => {
  marquee.style.marginLeft = `-${marquee.i}px`;;
  marquee.i = marquee.i < marquee.width ? marquee.i + marquee.step : 1;
  }); 
}
// Modified from StackOverflow answer by Stano:
// https://stackoverflow.com/questions/337330/javascript-marquee-to-replace-marquee-tags

.marquee {
    background: #eee;
    overflow: hidden;
    white-space: nowrap;
    position: absolute;
}

<div class="marquee">Hey there!</div>

Hopefully this helps. Cheers!

JSFiddle

Moving a paragraph from left edge of a div to right edge in ES6 (text should be deleted and reappear)

2 Answers2