CSSだけで流れるテキストを実装してみた

その昔…「marquee」というHTMLがありました。
このタグを使うと、さながら電光掲示板のように、流れるテキストを実装できたのですが。

このタグは「Internet Explorer」の独自要素で、現在は非推奨のタグです。
HTML5では廃止されゆくタグなのですが、流れるテキストはたまに要望があります。

JavaScriptでもありますけど、今回はこれもCSSで実装してみました。
CSS3は便利なのです。

●サンプル

●HTML

<div class="sample01">


流れる文字が　流れてゆくよ～

</div>

●CSS

.sample01 {
margin : 0 auto 40px;
width : 100%;
font-size : 28px;
text-align : center;
overflow : hidden;
}
.sample01 p{
margin:0;
display : inline-block;
padding-left: 100%;
white-space : nowrap;
line-height : 1em;
animation : scrollSample01 20s linear infinite;
}
@keyframes scrollSample01{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

これだけで、文字が流れていきます。

ちょっと改造して、こんなこともしてみます。

●サンプル

●HTML

<div class="sample02">

<ul>

<li>複数の文字列が～</li>


<li>流れてゆくよ～</li>


<li>テキスト毎に～</li>


<li>CSSも指定しちゃうよ～</li>

</ul>

</div>

●CSS

.sample02 {
margin : 0 auto 40px;
width : 100%;
font-size : 24px;
text-align : center;
overflow : hidden;
}
.sample02 ul{
margin:0;
display : inline-block;
padding-left: 100%;
white-space : nowrap;
line-height : 1em;
animation : scrollSample02 15s linear infinite;
}
.sample02 ul li{
display:inline;
margin:0 100px 0 0;
}
.sample02 ul li:nth-child(1){
font-weight:bold;
}
.sample02 ul li:nth-child(2){
color:#F00;
}
.sample02 ul li:nth-child(3){
font-style:italic;
}
.sample02 ul li:last-child{
color:#F90;
margin:0;
}
@keyframes scrollSample02{
0% { transform: translateX(0)}
100% { transform: translateX(-100%)}
}

テキストごとに個別にCSSを当てられるようにしています。
pタグで中のテキストをspanで囲ってもいいんですけどね。

動かす要素（サンプルではpやul）の中身をinlineにしておいて、マージンを調整してあげれば、このサンプルのタグ以外でもできそうですね。

以前このブログでも紹介した@keyframesを利用した動きですので、その気になれば下から上、上から下に流れるテキストも作れます。

●サンプル

●HTML

<div class="sample03">
<ul>
<li>複数の文字列が～</li>
<li>今度は～</li>
<li>登っていくよ～</li>
</ul>
</div>

●CSS

.sample03 {
margin : 0 auto 40px;
width : 100%;
height:1.5em;
font-size : 24px;
text-align : center;
overflow : hidden;
}
.sample03 ul{
display : inline-block;
white-space : nowrap;
line-height : 1.5em;
animation : scrollSample03 8s linear infinite;
}
.sample03 ul li{
margin:0;
}
@keyframes scrollSample03{
0% { transform: translateY(1.5em)}
100% { transform: translateY(-4.5em)}
}

サンプルは、高さ・行間を1.5emで指定。
transform: translateYで行の数だけ-emを指定しています。（サンプルの場合は行数×1.5em）

@keyframesアニメーションは、まだまだ応用が利きそうで面白いですねー。

今回はこちらのサイトの流れるテキスト生成を流用させていただきました。
https://webparts.cman.jp/string/scroll/