CSS Marquee Module Level 3
独自実装しているブラウザはWebkitとOperaですが、独自実装のため、W3Cの仕様とは異なっていたりします。
今回のデモはこちらです。
Webkit系のブラウザとOperaで見てみてください。
まず、Operaから……といきたいところですが、これたぶん携帯の指定と同じですよね。
一応説明します。
display: -wap-marquee
でマーキーできます。
マーキーのプロパティは次のようになります。
-wap-marquee-dir
rtl
を指定すると右から左へ。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
はそのまま。マーキーが停止する。