コニファ・ロゴ

csstest:HTML5で廃止された<marquee>タグのかわりにCSS3でマーキー

電光掲示板のテキスト自動スクロールのような動きを簡単に再現してくれる<marquee>タグは、サイトの「お知らせ」の彩りやデザインのワンポイントとして重宝していたのですが、HTML5で廃止されてしまいました。

しかたなくCSS3を使うことにしたのですが、marquee関連のプロパティがいまひとつ使いにくく、しっくりきません。具体的には、●動きがカクカクする。●スピードが微調整できない。●ブラウザ対応がはっきりしない。などなど…。文字を小さくしたサンプル(1)と電光掲示板のようにしたサンプル(2)、両者とも動きがカクカク、チカチカします。

p.sample1	{
	margin:0; padding:10px 0 4px 0; display:inline-block; white-space:nowrap;	
	overflow-style: auto; overflow: -webkit-marquee; overflow: marquee; 
	marquee-speed: normal; -webkit-marquee-speed: normal;    
 	marquee-play-count: infinite; -webkit-marquee-repetition: infinite;
    }

サンプル

サンプル(1)

BtoB WEB 受注システム 百万石・・・ 即行稼動!・・・ コスト削減・・・ 顧客満足度UP・・・ カスタマイズ可能・・・

サンプル(2)

BtoB WEB 受注システム 百万石・・・ 即行稼動!・・・ コスト削減・・・ 顧客満足度UP・・・ カスタマイズ可能・・・

解決策をネットで探していたところ、CSS3 animationを使ったマーキーを見つけました。こちらはなめらかな動きで、スピードの微調整も可能です。サンプル(3)。

.marquee p {
	margin:0; padding-left:600px; display:inline-block; white-space:nowrap;
	animation-name:marquee; animation-timing-function:linear;
	animation-duration:15s; animation-iteration-count:infinite;
	}
@keyframes marquee {
	from   { transform: translate(0%);} 
	99%,to { transform: translate(-100%);}
	}
※すべてに、各ブラウザ用のベンダープレフィックスが付きますが長いので省略しています。

サンプル(3)

BtoB WEB 受注システム 百万石・・・ 即行稼動!・・・ コスト削減・・・ 顧客満足度UP・・・ カスタマイズ可能・・・

 

※参考と引用;http://on-ze.com/archives/648
戻るボタン