目次
概要
よくあるテキストの無限ループ実装方法は、同じテキストを複数用意する必要があります。
もっとシンプルに実装できないかなと探究心によって考えた実装方法です。
そのため、アクセシビリティやメンテナンス性は考慮されていません。
サンプル
See the Pen 【CSS】Marquee animation using text-shadow by ユイト (@yuito_miki) on CodePen.
text-shadowでテキストを複製して、class属性marqueeのp自体を横に移動させています。
複製テキストの水平位置は、JSでwidthを取得し、その値をCSS変数--offset-xにセットしています。
アニメーションについて分かりやすくしたサンプルです。↓
See the Pen Untitled by ユイト (@yuito_miki) on CodePen.
※0.5xを押すと見やすいです。
borderで囲われている要素がオリジナルテキストで、それを要素の幅分だけ横に移動させています。移動が終わると、元の位置に戻りループしているように見えます。
