【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。
HTML5からは非推奨(廃止?)となり、今となっては懐かしい<marquee>
タグ。
内包する要素をスライドさせて表示することができるこのタグは、一時は廃れたかのように見えましたが、最近再び見直されるようになり、同じ動作をするスクリプトが一部のスマートフォン対応サイトなどで使われています。
<marquee>
タグが使えないとなると、同じ挙動は JavaScript で実現させようと考えるのが普通でしょうが、今日は CSS3 で marquee
を実装する方法を紹介します。
HTML の書き方
<div class="marquee">
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
「marquee」というクラスを与えたボックスでスライドさせたい要素を囲む。これが基本の記述です。
シンプルでいいですよね。
こういった簡単なプログラムコードに複雑さは厳禁です。
CSS3 の書き方
続いて CSS3 側の記述方法です。
.marquee {
width:600px;
padding:0.5em 0;
overflow:hidden;
background-color:#f6f6f6;
margin-bottom:10px;
position:relative;
}
.marquee p:after {
content:"";
white-space:nowrap;
padding-right:50px;
}
.marquee p {
margin:0;
padding-left:600px;
display:inline-block;
white-space:nowrap;
-webkit-animation-name:marquee;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:marquee;
-moz-animation-timing-function:linear;
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite;
-ms-animation-name:marquee;
-ms-animation-timing-function:linear;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite;
-o-animation-name:marquee;
-o-animation-timing-function:linear;
-o-animation-duration:10s;
-o-animation-iteration-count:infinite;
animation-name:marquee;
animation-timing-function:linear;
animation-duration:10s;
animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
from { -webkit-transform: translate(0%);}
99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
from { -moz-transform: translate(0%);}
99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
from { -ms-transform: translate(0%);}
99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
from { -o-transform: translate(0%);}
99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
from { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}
「.marquee」で内包する要素に、「padding-left」で「.marquee」の横幅と同じ値、もしくはそれよりも大きな値を指定しておくことが1つのポイントになります。
あとはanimation
とtranslate
をそれぞれ指定してなめらかな動きを実現しています。
このコードのデモは以下より。
CSS3 Marquee:サンプル・デモ