marqueeタグが非推奨になったので、代わりになるものを再現してみた。
CSSのキーフレームでも再現はできるんだろうけど、「アニメーションにかける時間」は文字数に応じてやりたいので、JavaScriptのanimateメソッドを使ってみた。
以下サンプル。
<html>
<style>
html,
body {
margin: 0;
padding: 0;
background-color: black;
overflow: hidden;
}
#main_pane {
margin: 0;
padding: 0;
line-height: 100vh;
height: 100vh;
color: white;
font-size: 80vh;
width: max-content;
font-weight: bold;
}
</style>
<div id="main_pane">こっちみて！😍😍😍</div>
<script>
const textLength = document.getElementById('main_pane').innerText.length;
document.getElementById('main_pane').animate(
[
{
// ギリ画面の外に出しておく（長3変形）
transform: "translateX(100vw) scale(0.7,1)",
},
{
// divの幅すべてを左に出す（長3変形）
transform: "translateX(-100%) scale(0.7,1)",
},
],
{
// 文字数 x 0.8秒かけて移動させる
duration: textLength * 800,
iterations: Infinity,
}
)
</script>
</html>
用途
スマホをデジタルサイネージ的に使って、案内文を出したい時を想定。
デジタルサイネージにするには、スマホのスリープを防ぐ仕組みが必要。WakeLock APIを使えばできるみたいだけど、まだ試してない。