CSSを使って流れるテキスト
以前「CSSを使ってボックスの内容をスクロールさせる方法」を書きました。
この方法では見ている人が自分でスクロールさせないと内容を見ることが出来ません。じつはこの記事を書いていた時から
文字が自動で流れるようにできないかな~
こんな風に思っていました。そこで今回は「CSSを使って流れるテキスト」に挑戦してみたいと思います。
CSSだけで動きをつけることできるの?
うん。できるみたいだよ!ちょっと理解出来てない部分があるけど頑張って挑戦してみるね!
右から左に流れるテキスト
右から左に流れるテキスト
<div class="text-ani_sample">
<p>右から左に流れるテキスト</p>
</div>
/*-------------------------
右から左に流れるテキスト
-------------------------*/
.text-ani_sample {
margin:0 1em 3em;
border-radius:0.5em; /*角丸*/
background:#f00; /*背景色*/
overflow:hidden;
}
.text-ani_sample p {
margin:0;
font-size:1.5em; /*文字サイズ*/
color:#fff; /*文字の色*/
animation: flowing 10s linear infinite; /*アニメーション*/
transform:translateX(100%); /*最初の位置*/
}
@keyframes flowing {
100% {
transform:translateX(-100%); /*終了の位置*/
}
animation プロパティ
CSSの15行目のanimationでテキストの動きを指定しています。
要素に適用される1つまたは複数のアニメーションを設定します。それぞれの名前はアニメーションシーケンスのプロパティ値を定義する @keyframes @-規則を設定します。
「animation-name」MDN web docs より引用
名前には英文字(大文字、小文字)、数字、「-(ハイフン)」、「_(アンダーバー)」を使用してつけます。
個別に指定する場合はanimation-nameを使います。
※@keyframesについては「@keyframes(MDN web docs様)を参考にしてください。
1回のアニメーションの周期が完了するまでの時間。時間は秒(s)またはミリ秒(ms)で指定します。時間の値は正数で指定します。
※時間を「0s」と指定するとアニメーションは実行しないという意味になります。
個別に指定する場合はanimation-durationを使います。
アニメーションのタイプを指定します。
- ease
アニメーションの変化量が中央に向かって増加し、最後に向かって減少する - linear
同じ速度でアニメーションする - ease-in
アニメーションの変化がゆっくり始まり、終わるまで加速する - ease-out
アニメーションの変化量が速く始まり速度を落としていく - ease-in-out
アニメーションの変化がゆっくり始まり、加速してまた速度落としていく
個別に指定する場合はanimation-timing-functionを使います。
アニメーションの再生回数回数を指定します。
- infinite
アニメーションを無限に繰り返します。 - 数値
アニメーションを繰り返す回数を指定。初期値は「1」です。また「0.5」などの非整数で指定すると途中から再生できます。
個別で指定する場合はanimation-iteration-countを使います。
※animationについては下記を参考にさせていただきました。
transform:translate
transform:translateで要素(テキスト)の位置を指定しています。
transform:translateX(X方向の位置);
transform:translateY(Y方向の位置);
X方向が横、y方向は縦となります。単位はpx(ピクセル)や%(パーセント)で指定します。
サンプル
その他の流れるテキストのサンプルです。
HTMLは共通です。
<div class="text-ani_sample">
<p>流れるテキスト</p>
</div>
左から右
流れるテキスト
/*-------------------------
左から右に流れるテキスト
-------------------------*/
.text-ani_sample {
margin:0 1em 3em;
border-radius:0.5em; /*角丸*/
background:#f00; /*背景色*/
overflow:hidden;
}
.text-ani_sample p {
margin:0;
font-size:1.5em; /*文字サイズ*/
color:#fff; /*文字の色*/
animation: flowing 10s linear infinite; /*アニメーション*/
transform:translateX(-100%); /*最初の位置*/
}
@keyframes flowing {
100% {
transform:translateX(100%); /*終わりの位置*/
}
}
上から下
流れるテキスト
/*-------------------------
上にから下に流れるテキスト
-------------------------*/
.text-ani_sample {
margin:0 1em 3em;
border-radius:0.5em; /*角丸*/
background:#f00; /*背景色*/
text-align:center; /*テキストの位置*/
overflow:hidden;
}
.text-ani_sample p {
margin:0;
font-size:1.5em; /*文字サイズ*/
color:#fff; /*文字の色*/
animation: flowing 6s linear infinite; /*アニメーション*/
transform:translateY(-100%); /*最初の位置*/
}
@keyframes flowing {
100% {
transform:translateY(100%); /*終わりの位置*/
}
}
下から上
流れるテキスト
/*-------------------------
下にから上に流れるテキスト
-------------------------*/
.text-ani_sample {
margin:0 1em 3em;
border-radius:0.5em; /*角丸*/
background:#f00; /*背景色*/
text-align:center; /*テキストの位置*/
overflow:hidden;
}
.text-ani_sample p {
margin:0;
font-size:1.5em; /*文字サイズ*/
color:#fff; /*文字の色*/
animation: flowing 6s linear infinite; /*アニメーション*/
transform:translateY(100%); /*最初の位置*/
}
@keyframes flowing {
100% {
transform:translateY(-100%); /*終わりの位置*/
}
}
複数行を流す
上のコードを使って流すテキストを複数行にしてみると縦方向に流れるテキストはできるのですが、横方向に流すと全ての行が一緒に流れてしまいます(^^;
流れるテキスト
流れるテキスト
追いかけるようにすることはできないの?
ちゃんと調べてみましたよ!v(^^)
- 1つめの流れるテキスト
- 2つめの流れるテキスト
- 3つめも流れるテキスト
- 4つめの流れるテキスト
<div class="text-ani_sample05">
<ul>
<li>1つめの流れるテキスト</li>
<li>2つめの流れるテキスト</li>
<li>3つめも流れるテキスト</li>
<li>4つめの流れるテキスト</li>
</ul>
</div>
/*-------------------------
複数行テキストを流す
-------------------------*/
.text-ani_sample05 {
margin : 2em 1em;
border-radius:0.5em;
background:#f00;
overflow :hidden;
}
.text-ani_sample05 ul {
margin:0;
padding-left:100%;
display : inline-block;
white-space : nowrap;
animation :flowing05 18s linear infinite;
transform:translateX(0);
}
.text-ani_sample05 ul li {
display:inline;
margin:0 100px 0 0;
font-size:1.5em;
color:#fff;
}
@keyframes flowing05 {
100% {
transform: translateX(-100%)
}
}
へえ~。HTMLに箇条書きのul、liを使うんだね。
うん。行(文字列)を1つにすれば1行で流れるし、もちろん方向を変えれば縦方向にも流すこともできるよ!
※こちらは以下の記事を参考にさせていただきました。
※その他の参考にした記事
animationを使えばいろいろなアニメーションができます。画像や背景色を変えることもできます。
ぜひ挑戦してみてください。
画像も流せる
上記ではテキストを流していますが、テキストだけではなく画像も流すことが出来ます。
こんにちは。結耶です。
<div class="text-ani_sample">
<p><img src="画像のURL"> こんにちは。結耶です。</p>
</div>
このようにテキストと画像を入れれば画像とテキストを一緒に流すこともできます。
おお~!結耶が動いてるぅ!w
以上です。
ディスカッション