文字を二重縁取りで右から左に流す

ニュースとかの下にずっと右から左に文字が流れるwidgetのようなものをつくった。(marquee, tickerとか呼ばれる)
OBSに読み込ませて配信とかの素材に使えるかなと。

See the Pen Untitled by pg-ito (@pg-ito) on CodePen.

HTML

JSでこのように設定される。これをCSSで文字を二重に描画するときに使う。
また、li要素を2つだぶらせておくのはループ再生したときに切れ目なく表示され続けるための仕掛け。

<li class="news_item" data-text="佐波野いりこチャンネル Twitter: @SabanoIriko">

CSS

継ぎ目なくスクロールするために0%から-50%までスクロールする

@keyframes hscroll {
	0% { transform:translateX(0%); }
	100% { transform:translateX(-50%); }
}

jsでdata-textの値をli要素の文言と同じにしておく。

newsEls.forEach(function(newsEl){
  const attr = document.createAttribute('data-text');
  attr.value = newsEl.innerHTML;
  newsEl.setAttributeNode(attr);  
})

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル