近年、見かけることも少なくなった「marquee（マーキー）」ですが、元々はIEの独自機能でもあったため、HTMLでは非推奨とされ消えていきました。
そんな「marquee」のテロップ的動きをコンテンツに組み込みたいな～と考えたとき、CSSだけでなんちゃってマーキーが表現できるので、どうしてもって時は“アリ”かもしれません。
まずはサンプルをご用意しましたので確認してみてください。
それでは記述方法を見ていきましょう。
HTML記述
|
1 2 3 |
<h2>右から左へ文字が流れていきます。</h2> <div class="imageBox"><img src="images/autumn.jpg" width="100%" /></div> <div class="marqueeRightLeft"><p>ここにマーキー文字を流します。</p></div> |
テキストの上に画像を配置していますが、なくても構いません。
CSS記述
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
/* MARQUEE */ .marqueeRightLeft { max-width: 500px; padding: 0.5em 0; margin: 0 auto; position: relative; overflow: hidden; text-align: left; border-top: 1px solid #6c5441; border-bottom: 1px solid #6c5441; color:#6c5441; font-weight: bold; } .marqueeRightLeft p:after { content: ""; white-space: nowrap; } .marqueeRightLeft p { margin: 0; padding-left: 100%; display: inline-block; white-space: nowrap; -webkit-animation-name:marqueeRL; -webkit-animation-timing-function:linear; -webkit-animation-duration:12s; -webkit-animation-iteration-count:infinite; -moz-animation-name:marqueeRL; -moz-animation-timing-function:linear; -moz-animation-duration:12s; -moz-animation-iteration-count:infinite; -ms-animation-name:marqueeRL; -ms-animation-timing-function:linear; -ms-animation-duration:12s; -ms-animation-iteration-count:infinite; -o-animation-name:marqueeRL; -o-animation-timing-function:linear; -o-animation-duration:12s; -o-animation-iteration-count:infinite; animation-name:marqueeRL; animation-timing-function:linear; animation-duration:12s; animation-iteration-count:infinite; } @-webkit-keyframes marqueeRL { from {-webkit-transform:translate(0);} to {-webkit-transform:translate(-100%);} } @-moz-keyframes marqueeRL { from {-moz-transform:translate(0);} to {-moz-transform:translate(-100%);} } @-ms-keyframes marqueeRL { from {-ms-transform:translate(0);} to {-ms-transform:translate(-100%);} } @-o-keyframes marqueeRL { from {-o-transform:translate(0);} to {-o-transform:translate(-100%);} } @keyframes marqueeRL { from {transform:translate(0);} to {transform:translate(-100%);} } |
スクロール速度は「animation-duration:12s;」の「12s」のところで「速度」というよりも「どれくらい時間をかけて○○をする」という指定の仕方をしています。単純に秒数を小さくすれば早く、大きくすれば遅くなりますので調整してみてください。