Result
ジオシティーズ時代の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 { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); }} |
解説は元サイトでかなり詳しくされているので割愛します。
html
<div class="marquee"> <ul class="marquee__content"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> <ul aria-hidden="true" class="marquee__content"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> </div> |
