2022年08月12日(金)

非推奨のmarqueeタグのような動作をモダンなCSSで再現

• 0
• 0
• 6
• 6

Result

See the Pen
CSS Marquee Examples by kachibito (@kachibito)
on CodePen.

ジオシティーズ時代のWebサイトの象徴のような存在だったmarqueeタグは現在は非推奨ですが、そもそも使い方の問題という印象ではあります。

そこでモダンなCSSでレスポンシブにも対応した上で再現しよう、というブログ記事が気になったので備忘録。

上記デモではmarqueeの再現ではありますが、マウスホバーで停止する事も可能です。

css

.marquee { --gap: 1rem; display: flex; overflow: hidden; user-select: none; gap: var(--gap); } .marquee__content { flex-shrink: 0; display: flex; justify-content: space-around; min-width: 100%; gap: var(--gap); } @keyframes scroll { f...