CSSアニメーションで「エア嵐コール」を作ってみた

タイトルが何を言っているのか1つも伝わらないと思うので、まずは完成物をご覧ください。

See the Pen Air ARASHI Call by さわ (@rily0486) on CodePen.

つまるところ、右から左に文字を流すアニメーションを、CSSだけで実装してみました、というお話です。

サンプルHTML

まずは、流す文字をHTMLでコーディング。

  <div class="wrap">
    <p class="marquee">
      <span>あーらーし(*‘◇‘)</span>
      <span>あーらーしﾉﾉ｀∀´ﾙ</span>
      <span>あーらーし(.ﾟーﾟ)</span>
      <span>あーらーし(´･∀･｀)</span>
      <span>あーらーし(｀･3･´)</span>
    </p>
  </div>

.wrapが文字を流す枠の部分、.marqueeがCSSアニメーションを設定する（実際に動く）要素です。

アニメーション以外のCSS

CSSアニメーションを設定する前に、ベースとなるCSSを抜粋。

.wrap{
  overflow: hidden; /* 枠からはみ出した要素を隠す */
  width: 320px; /* 固定値 */
}

.marquee {
  width:100%; /* 枠のサイズに対して100% */
  white-space:nowrap; /* 文字が折り返さないようにする */
}

枠となる要素（.wrap）には、widthで固定幅を指定。

100%などの相対値で指定するとデバイスによって文字の流れるスピードが変わるため、どのデバイスでも一定のスピードで流れるようにするために固定値推奨。

文字を流すにあたり、枠からはみ出している部分は見えないようにするため、overflow:hidden;をかけます。

実際に流れる文字の部分（.marquee）は、.wrapに対して幅100%を指定。

また、全てを1行で表示するために、white-space: nowrap;を指定。

CSSアニメーション

今回の要、CSSアニメーションの部分。

.marquee {
  animation: marquee 20s linear infinite; /* アニメーション名 秒数 動き方 繰り返し */
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-220%); }
}

@keyframesでアニメーションを設定。

0%（動き始め）は、.wrapの右端に.marqueeの先頭が来るようにtransform: translateX(100%);

100%（動き終わり）は、.wrapの左端に.marqueeの末尾が来るようにtransform: translateX(-220%);

今回は、枠（.wrap）の幅(320px)よりも流す文字の幅の方が長いため、-100%よりも小さい数値を指定しています

そして.marqueeに指定するanimationプロパティで、アニメーションを流す秒数や繰り返しなどを指定。

言葉でまとめると、

20秒で右端から左端まで文字を流すアニメーションを繰り返す

という設定をしています

これで、「あーらーし」の文字が流れるエア嵐コールの完成!!

おまけ：かつては、HTMLの<marquee>タグが使われていた

昔は、CSSではなくHTMLの<marquee>タグが使われておりました。

しかし、文書構造はHTML、装飾はCSSと分離する流れの中、HTML5で<marquee>タグが廃止に。

同等の装飾は、CSSアニメーションへバトンタッチされていったのです。

おまけのおまけ：エア嵐コールってそもそも何

嵐のコンサートでは、開演前やアンコールで

「あーらーし!!あーらーし!!」

と、会場のお客さんでコールをします。これが「嵐コール」。

これを、Twitter等のネット上で開演時間前に合わせて「あーらーし!!」と投稿する。これが「エア嵐コール」です。

なぜかTwitterトレンドでは「あーらー」でトレンド入りする。惜しい。

エア嵐コール、別バージョン作りました

あわせて読みたい

CSSアニメーションで「エア嵐コール」を作ってみた その2(step編)

さわ

webエンジニア

Twitter

webサイト制作をメインとして、フロントからインフラまで広くかじっているIT屋さんをやっています