CSS Marquee
公開：
更新：
2020年1月7日 追記：
この指定方法はもはや動作しません。
懐かしいと思う人もいるかもしれませんが、marquee要素ってありますよね。非推奨になってしまいましたが、あの動きはCSS3に受け継がれています。
今回はそれを実装しているブラウザでの使い方を書いてみたいと思います。
CSS3としての仕様は以下のリンクからどうぞ。
独自実装しているブラウザはWebkitとOperaですが、独自実装のため、W3Cの仕様とは異なっていたりします。
今回のデモはこちらです。
Webkit系のブラウザとOperaで見てみてください。
まず、Operaから……といきたいところですが、これたぶん携帯の指定と同じですよね。
一応説明します。
display: -wap-marqueeでマーキーできます。
マーキーのプロパティは次のようになります。
-wap-marquee-dirrtlを指定すると右から左へ。ltrだと左から右へ。-wap-marquee-loop- ループ回数。
数字かinfiniteを指定する。 -wap-marquee-speed- 動く速度。
fast,normal,slowのどれか。 -wap-marquee-style- マーキーのスタイル。
alternate,scroll,slideのどれか。alternateは向きが交互に変わる。scroll,slideの違いは多分W3Cのと一緒。
次はWebkitの指定。
まず、overflow, overflow-x, overflow-yに-webkit-marqueeを指定します。
これでデフォルトの動きは実現できますが、Operaのと同様にオプションみたいなものがあります。
-webkit-marquee-direction- 方向ですね。
auto: デフォルトahead: 順方向（上下）reverse: 逆方向（上下）forwards: 順方向（左右）backwards: 逆方向（左右）up: 下から上down: 上から下right: 左から右left: 右から左
ahead,reverse,forwards,backwardsは文書の文字方向に依存。up,down,left,rightは見た目そのまま。 -webkit-marquee-increment- 一度に移動する距離。
large,normal,smallのどれか。 -webkit-marquee-repetition- ループ回数。
数字かinfiniteを指定する。 -webkit-marquee-speed- 動く速度。
fast,normal,slowもしくは、distans/time（例：10px/s） のように指定する。
ただ、distans/timeのほうは指定しても無視されてるっぽい（2011年05月12日時点）。 -webkit-marquee-style- マーキーのスタイル。
alternate,scroll,slide,noneのどれか。alternateは向きが交互に変わる。scroll,slideの違いはW3Cのと一緒。noneはそのまま。マーキーが停止する。