【電光掲示板風】文字が横に流れるアニメーションをCSSで簡単実装

なる

学習期間５ヶ月、独立後４ヶ月で月収３０万を突破した「なる（@naru000006）」です。

この記事では、文字が電光掲示板のように横に流れるアニメーションをCSSで簡単に実装する方法を紹介しています。

実装すること

今回実装するアニメーションはこちらです。

このアニメーションはテキストを横方向に無限にスクロールさせるものです。

See the Pen アニメーション by narukichi06 (@narukichi06) on CodePen.

解説

1. HTML
2. CSS
3. キーフレームアニメーションとは
4. 注意事項

HTML

HTMLはこのような構造になっています。

    <div class="animation-wrapper">
        <div class="animation-inner">
          <div class="animation-box">
            <p class="animation">文字が横に流れ続けます。文字が横に流れ続けます。</p>
          </div>
        </div>
      </div>

各クラスの役割は以下の通りです。

• .animation-wrapper: アニメーション全体の外枠。
• .animation-inner: アニメーションを中央寄せするための内枠。
• .animation-box: 実際にアニメーションするテキストを含む要素。

CSS

CSSは以下の通りです。

ここでは、キーフレームアニメーションを使用しています。

.animation {
    font-family: 'DotGothic16', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 66px;
    letter-spacing: 0em;
    text-align: right;
    margin-left: auto;
    margin-right: 0;
    color: #FF8C00;
    white-space: nowrap;
  }
  
  .animation-wrapper {
    width: 100%;
    height: fit-content;
    background-color: #000;
    overflow: hidden;
  }
  
  .animation-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 80px;
    position: relative;
  }
  
  .animation-box {
    transform: translateX(300%);  /* 初めは画面の右外側に配置 */
    animation: flow-text 10s linear infinite;
  }
  
  @keyframes flow-text {
    0% {
      transform: translateX(200%);  /* 初めは画面の右外側に配置 */
    }
    100% {
      transform: translateX(-100%);  /* 終わりは画面の左外側に配置 */
    }
  }
  

ポイント①　「white-space:nowarp」でテキストを１行にする

このアニメーションでは、どんな画面幅でもテキストが１行で表示されなくてはなりません。

「white-space:nowrap」でテキストを１行で表示し、横方向のスクロールを正確に行うことができます。

フォントサイズや文字色を記述する箇所に忘れずつけておきましょう。

ポイント②　「over-flow:hidden」ではみ出したテキストのはみ出しを防ぐ

「over-flow:hidden」はその要素からはみ出た子・孫要素を隠すプロパティです。

このプロパティによって、アニメーションの外側からはみ出たテキストが隠されるため、見た目がスムーズになります。

キーフレームアニメーションとは

キーフレームアニメーションとは、CSSで定義するアニメーション形態の１つです。

キーフレームアニメーションの基本構文

キーフレームアニメーションでは、アニメーションの各「キーフレーム（特定の時点）」でのスタイルを定義します。

@keyframes flow-text {
  0% {
    /* 開始時のスタイル */
  }
  50% {
    /* 中間点のスタイル */
  }
  100% {
    /* 終了時のスタイル */
  }
}

今回のアニメーションはこのようになっています。

  @keyframes flow-text {
    0% {
      transform: translateX(200%);  /* 初めは画面の右外側に配置 */
    }
    100% {
      transform: translateX(-100%);  /* 終わりは画面の左外側に配置 */
    }
  }

アニメーションの呼び出し

@keyframesに名前を付け、HTML要素にこのアニメーションを適用することができます。

（今回は「flow-text」と設定）

 .animation-box {
    transform: translateX(300%);  /* 初めは画面の右外側に配置 */
    animation: flow-text 10s linear infinite;
  }

プロパティとオプション

今回のコードはこのプロパティを１つにまとめて書いています。

「top」や「left」で動かすのは要注意

とても簡単にアニメーションを実装できるkeyframeですが、「top」や「left」の使用には十分注意してください。

なぜなら…

「アニメーションがかくつく可能性があるから」です。

実際、先ほどのアニメーションを「left」を使って動かしたところ、スマホでかなりかくついてしまいました。

これは、「リフロー」という現象が起きてしまっているからなんです。

リフローとは、CSSのスタイルが変更されたときにブラウザがページのレイアウトを再計算することです。再計算のプロセスに時間がとられ、かくつきの原因となることがあります。

「transform」を使ってリフローを最小限におさえる

「left」や「top」は要素の位置を直接指定するため、変更するとその要素だけでなく周囲の要素も影響を受ける可能性があり、その結果、リフローが頻繁に起こる可能性があります。

それに対して、「transform」は元の要素の形状や位置に対する変換を行います。

そのため、要素自体は周囲のレイアウトに影響を与えずに移動や拡大縮小ができます。これによってリフローが減少し、パフォーマンスが向上する可能性があります。

また、transformはGPUというグラフィックに関する計算を高速に行うハードウェアを使って処理を行います。

そのため、transformを使用すると、CPUの負担が軽減され、全体的なページのパフォーマンスが向上することが多いのです。

まとめ