ES6で段落の左端から右端に段落を移動する（テキストを削除して再度表示する必要があります）

Question

申し訳ありませんが、文句を誤っていると、文句の必要性がわかりません。

は、私はdivの内側の段落を持って言う：

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

1. 私はアップは50pxまで、（0-2pxカバー）段落を移動したいです。
2. 49/50に達すると、1文字が消えます。
3. それが50/50に到達すると、全ての2つの文字がなくなって、そして同じ動作を明確にするために...最初から、再び

を開始します：私はテキストバーを動かすこれらの「古い学校」を作成することを意味しますバーの右端でテキストが始まり、ある速度でピクセルの後のピクセルを左端に移動し、消えて、再び同じパターンになります。

「テキストを移動する」というコードは見つかりませんでした（ES6にはまったくありません） [1]、 [2]。私が見つけたもののほとんどはthis articleのようなJqueryですが、私はES6のバニラ解決策を望んでいます。

Answer 1

あなたは、CSSアニメーションとそれを達成することができます

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>

Answer 2

私はSO以下の古いJavascriptのソリューションを更新：

const marquees = [...document.querySelectorAll('.marquee')]; 
 
marquees.forEach((marquee) => { 
 
    marquee.innerHTML = marquee.innerHTML + ' '.repeat(5); 
 
    marquee.i = 0; 
 
    marquee.step = 3; 
 
\t marquee.width = (marquee.clientWidth + 1); 
 
    marquee.style.position = ''; 
 
    marquee.innerHTML = `${marquee.innerHTML} `.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>

うまくいけば、このことができます。乾杯！

JSFiddle