スポンサーリンク

CSSを使って流れるテキスト

2020年1月26日

以前「CSSを使ってボックスの内容をスクロールさせる方法」を書きました。

この方法では見ている人が自分でスクロールさせないと内容を見ることが出来ません。じつはこの記事を書いていた時から

結耶
結耶

文字が自動で流れるようにできないかな~

こんな風に思っていました。そこで今回は「CSSを使って流れるテキスト」に挑戦してみたいと思います。

きらり
きらり

CSSだけで動きをつけることできるの?

結耶
結耶

うん。できるみたいだよ!ちょっと理解出来てない部分があるけど頑張って挑戦してみるね!

スポンサーリンク

右から左に流れるテキスト

右から左に流れるテキスト

HTML
<div class="text-ani_sample">
    <p>右から左に流れるテキスト</p>
</div>
CSS
/*-------------------------
  右から左に流れるテキスト
-------------------------*/
.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でテキストの動きを指定しています。

CSSanimation:キーフレーム名 時間 タイプ 再生回数
キーフレーム名

要素に適用される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:(X方向の位置 , Y方向の位置);
transform:translateX(X方向の位置);
transform:translateY(Y方向の位置);

X方向が横、y方向は縦となります。単位はpx(ピクセル)や%(パーセント)で指定します。

スポンサーリンク

サンプル

その他の流れるテキストのサンプルです。

HTMLは共通です。

同じページに違う動きのアニメーションを使う場合には、「クラス名」と「キーフレーム名」を変更してください。
HTML
<div class="text-ani_sample">
    <p>流れるテキスト</p>
</div>

左から右

流れるテキスト

CSS
/*-------------------------
  左から右に流れるテキスト
-------------------------*/
.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%);    /*終わりの位置*/
  }
}

上から下

流れるテキスト

CSS
/*-------------------------
  上にから下に流れるテキスト
-------------------------*/
.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%);    /*終わりの位置*/
  }
}

下から上

流れるテキスト

CSS
/*-------------------------
  下にから上に流れるテキスト
-------------------------*/
.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つめの流れるテキスト
HTML
<div class="text-ani_sample05">
   <ul>
     <li>1つめの流れるテキスト</li>
     <li>2つめの流れるテキスト</li>
     <li>3つめも流れるテキスト</li>
     <li>4つめの流れるテキスト</li>
   </ul>
</div>
CSS
/*-------------------------
  複数行テキストを流す
-------------------------*/
.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を使えばいろいろなアニメーションができます。画像や背景色を変えることもできます。 ぜひ挑戦してみてください。

画像も流せる

上記ではテキストを流していますが、テキストだけではなく画像も流すことが出来ます。

こんにちは。結耶です。

HTML
<div class="text-ani_sample">
    <p><img src="画像のURL"> こんにちは。結耶です。</p>
</div>

このようにテキストと画像を入れれば画像とテキストを一緒に流すこともできます。

きらり
きらり

おお~!結耶が動いてるぅ!w

以上です。

スポンサーリンク
応援よろしくお願いします。
      ブログランキング・にほんブログ村へ

お問い合わせはこちら
この記事を書いた人

結耶(ゆうや)

2017年9月からブログ、アフィリエイトを知識ゼロから始めたまだまだ駆け出しです。ブログやWordPress、アフィリエイトを勉強しています!
多発性硬化症(MS)という難病と闘っています。