読者です 読者をやめる 読者になる 読者になる

Corredor

ウェブ、プログラミングの勉強メモ。

懐かしの marquee 要素を CSS3 で再現する

あの頃よく使っていた懐かしの HTML タグを思い出す企画。

第1弾は marquee 要素。

marquee 要素って?

テキストを電光掲示板のようにスクロール表示させる要素。元々は IE が独自に導入したで、IE4 あたりから使えていたので、90年代のインターネットを彩る代表的なタグだった。ネットスケープではしばらく使えず、JavaScript で同様の動きを再現するものもしばしば見られた。

vspacebehaviorscrolldelaybgcolor…。当たり前だが、属性にもモロに「見栄え」に関する内容が表れている。

これってブロック要素だと思うんだけど、p 要素の中に入れてる人もいて、インライン要素だったのかな?DTD 見るのめんどくさいので放置。

CSS3 で再現する

overflow:-webkit-marquee; という指定で一部ブラウザで動作する、というものをいくつか見かけたが、どうも Firefox も Chrome でも見られなかったので無視することに。

素直に Animation を使うのがシンプルか。一応親要素の幅に関わらず動作するように作ったつもり。

See the Pen CSS3 Marquee by Neos21 (@Neos21) on CodePen.

marquee 要素は scrollamount 属性で移動量を示すことでスピードを変化させるのに対し、CSS Animation を使う場合は animation-duration が「何秒で端から端まで移動するか」という指定の仕方になる。

scrolldelay 属性による再描画間隔の指定もないので、CSS Animation の方はとてもヌルヌル動く。ヌルヌル動くのが良い場合もあるが、marquee というとあの独特なカクつきがあってこそだと思うので、それを再現するにはやはり JavaScript だろうか。