先日、スマートフォン専用サイトの制作を依頼されまして、その際、marquee タグによるデザインを同時に打診されました。
しかしながら、HTML5ではmarqueeタグは非推奨。
今後は廃止予定のタグということで、別の方法を模索。
jQueryでの実装も考えましたが、CSS3を使ってより簡単にmarqueeを再現できるので、コチラを採用しました。
実際のコードは以下。
.marquee {
overflow:-webkit-marquee;
white-space:nowrap;
}
これだけでOK!
とりあえず、Android 2.3以降のデフォルトブラウザ・iOS5以降Safariでは問題なく動作します。
他の端末や対応していないブラウザでの挙動が怪しいのが難点です。
細部までこだわるなら、動き方、動く範囲、動くスピード、繰り返す回数など、それぞれ任意に指定できます。
- -webkit-marquee-direction
- スクロールする方向。left（左方向）、right（右方向）、up（上方向）、down（下方向）を指定できます。marquee要素のdirection属性に相当します。
- -webkit-marquee-speed
- 描画する時間の間隔 （ミリ秒、slow、normal、fast）を指定できます。marquee要素のscrolldelay属性に相当します。
- -webkit-marquee-increment
- 描画する毎に進む距離。ネガティブ値を指定するとスクロールが反対向きになります。marquee要素のscrollamount属性に相当します。
- -webkit-marquee-repetition
- スクロールする回数。infiniteで無限ループになります。marquee要素のloop属性に相当します。
- -webkit-marquee-style
- スクロールの動作のパターン。scroll（一定方向）、alternate（往復）、slide（端まで動いて停止）を指定できます。marquee要素のbehavior属性に相当します。
以上。わずか2行の CSS3 でmarqueeを再現する方法でした。
追記：
下記URLのリンク先で新たに、全ブラウザ対応の CSS3 Marquee の実装方法を紹介しています。
合わせてご覧ください。
