こんにちは、虎の穴ラボのおっくんです。

昨今の COVID-19 関連ニュースの裏で、去る 3月13 日にひっそりと東海道新幹線車内のニューステロップの提供が終わってしまいました。

特別な思い入れがあるわけではないのですが、そこに在ったものが無くなったというのは少し寂しくもあります。今回は、新幹線の車内ニュース風の表示を CSS アニメーションで作成したので、紹介します。

実行環境

OS: macOS Mojave 10.14.6
Node.js: 12.13.1
npm: 6.12.1

環境構築

npm init -y
# http-serverをインストール
npm install http-server --save-dev

# http-serverによって配信されるディレクトリ作成
mkdir public

# http-server開始
npx http-server

配信ファイル作成

環境構築で作成したpublicディレクトリに、index.htmlを作成します。

作成した index.html は、以下のようにしました。

<html>
  <head>
    <title>train news view</title>
    <style>
      .roll-box {
        margin: 0 auto;
        padding: 0;
        height: 60px;
        width: 440px;
        overflow: hidden;
        border: black solid 3px;
        background-color: black;
      }
      #news {
        position: relative;
        margin: 0;
        padding: 0;
      }
      #news > div {
        color: white;
        font-size: 50px;
        font-weight: 100;
        font-family: "cursive";
        width: 1400px;
        position: absolute;
        left: 440;
        margin: 0 auto;
        text-align: left;
      }
      .slide-in {
        animation: 18s linear 0s alternate slide-anim;
      }
      @keyframes slide-anim {
        0% {
          transform: translate(0px, 0px);
        }
        100% {
          transform: translate(-1840px, 0px);
        }
      }
    </style>
  </head>
  <body>
    <div>
      <div class="roll-box">
        <div id="news">
          <div>
            ◇未来ニュース：木星往還宇宙船エンジンテスト成功
          </div>
          <div>
            ラグランジュポイント4にて木星往還宇宙船ジュピター８の
          </div>
          <div>
            エンジンテストが行われた
          </div>
          <div>
            国際宇宙開発機構「木星は既に遠くない星だ」との声明を発表
          </div>
          <div>
            ◇本日の天気 東京:晴れ 盛岡:晴れ 札幌:晴れ
          </div>
        </div>
      </div>
    </div>
    <script
      src="https://code.jquery.com/jquery-3.4.1.slim.js"
      integrity="sha256-BTlTdQO9/fascB1drekrDVkaKd9PkwBymMlHOiG+qLI="
      crossorigin="anonymous"
    ></script>
    <script>
      var count = 0;

      //クラス割り当て処理
      var scroll = function () {
        var index = count % $("#news div").length;
        $("#news div").eq(index).addClass("slide-in");
        setTimeout(() => {
          $("#news div").eq(index).removeClass("slide-in");
        }, 18000);
        count += 1;
      };

      //スクロール開始
      scroll();
      setInterval(scroll, 18000);
    </script>
  </body>
</html>

こちらを設置して、localhost:8080にアクセスすると、次のように表示されているはずです。

f:id:toranoana-lab:20200416142220g:plain

少し解説します。

<div id="news">以下に div で文章を記述しています。こちらを、JavaScript の処理で、18 秒ごとにclassの付与と削除を行います。

.slide-in クラスの付与によって、animation: 18s linear 0s alternate slide-anim;が実行されます。具体的な文字スライドのアニメーションは、@keyframes slide-animの中の記述が CSS アニメーションの本体です。

今回の場合、18 秒間のアニメーションを 0%から 100%に分割して、その開始から終端の間に x 軸方向に-1840 ピクセル動かすというアニメーションになります。

18 秒後には、クラスが削除され元の座標に戻ります。

この処理を断続的に行うことで、見かけ上文字を延々とループ表示させることができます。

文字数と、スライド速度によってパラメータが変わります。今回は記憶の中の、新幹線の車内ニュースの表示速度を再現しました。

見えない部分

今回作成したindex.htmlのスタイルの記述の部分で、.roll-boxに、overflow: hidden;を記述しています。

こちらを消してみると、どういった動きをしているのかがわかりやすくなります。表示は以下のようになります。

f:id:toranoana-lab:20200416142646g:plain

すべての文字は、表示する div の右側の枠外に設置しておき、順次アニメーションを行います。左側の枠外にたどり着いたあたりで、元の右側枠外に戻ります。単純な横移動が、一部を隠すだけで延々と回って見えるので面白いですね。

まとめ

CSS アニメーションを使用して、新幹線の車内ニュース風のアニメーションを作成しました。 0%から 100%までの間の動きを記述するという直感的な作り方ができるのがとても好みです。
途中に「一度停止させる」であったり、「色を変える」といった様々なことが可能なので、また CSS アニメーションを使って何か挑戦してみたいと思います。

P.S

虎の穴ラボでの開発に少しでも興味を持っていただけた方は、採用説明会やカジュアル面談という場でもっと深くお話しすることもできます。ぜひお気軽に申し込みいただければ幸いです。虎の穴ラボのエンジニアが、開発プロセスの内容であったり、「今季何見ました？」といったオタクトークであったり、何でもお応えします。
※現在はオンラインカジュアル面談のみ受け付けております。(2020/4/17時点)

（WantedlyやLAPLASでの採用も行っております）

yumenosora.co.jp

news.toranoana.jp

とらのあなラボでは、ツイッターで毎日情報発信しています。ぜひフォローしてください！ twitter.com

4月22日に「とらのあなエンジニアがオススメする技術書」というテーマでオンラインLT会を開催します。 yumenosora.connpass.com

5月7日に「とらのあな採用説明会 5/7 オタク企業で働くエンジニアの魅力について」オンライン会社説明会を開催します。

yumenosora.connpass.com