懐かしのmarquee？テキストを自動スクロールさせる方法と実装例

marquee  とは

かつては marquee というタグが使われ、このタグで囲んだテキストが自動的に右から左に移動しました。現在でもこのタグは Chrome をはじめとするブラウザーで実行できますが、すでに非推奨となっています。

このテキストの自動スクロール、少し前からまたちょこちょこ見かけるようになりました。かつては少ないスペースに多くの情報を表示するために使われていたのかなと思いますが、現代ではどちらかというと装飾目的のようです。一部のコンテンツを動かすことで、画面にアクセントをつけている…といったところでしょうか。

EiiS 2022 Autumnの Web サイトでは画面下部に自動スクロールテキストを配置。人物画像の後ろにまわったり、画面から見切れている感じも素敵です。

実装方法

ただ、よく見ると marquee タグではなく CSS アニメーションや JavaScript を使って実装しているようです。かんたんにサンプルを作ってみました。

CSS バージョン

HTML

無限リピートさせるために、同じ内容のテキストを横並びに配置。一方には aria-hidden="true" をつけて、音声ブラウザーで読み上げないように設定するといいでしょう。

<div class="marquee">
  <div class="marquee-inner">Lorem ipsum dolor sit amet...</div>
  <div class="marquee-inner" aria-hidden="true">
    Lorem ipsum dolor sit amet...
  </div>
</div>

CSS

CSS ではキーフレームを使って、 translate で横方向の位置を変更する指示をします。マイナス値を指定することで右から左に移動します。gap で指定した余白分も引いておかないと、動きにガタツキが出るので注意。

.marquee {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  gap: 1rem;
  font-size: 3rem;
}
.marquee-inner {
  animation: marquee 20s linear infinite;
}

@keyframes marquee {
  0% {
    translate: 0;
  }
  100% {
    translate: calc(-100% - 1rem);
  }
}

JavaScript バージョン

JavaScript のWeb Animations APIを使って実装するパターン。イベントと組み合わせたり、速度を動的に変えたいときは JavaScript を使うとよさそうですね。

自動スクロールテキストを実装している Web サイトの例

様々な Web サイトで取り入れられていました。デザインの参考にしてみてください！

Graceful INDIA

Graceful INDIAでは、テキストが画像の前面に重なったり、背面にまわったりと、シンプルなようでなかなかニクイ演出と組み合わせています。

Luna

モバイルサイズをベースに作成されたLunaの Web サイトでは、デスクトップサイズに限り画面両端に縦に流れる自動スクロールテキストが。

2022 SPRING COLLECTION | 靴下屋

テキストを SVG のパスに添わせて動かしている靴下屋の Web サイト。

神戸女学院大学 音楽学部音楽学科

薄い文字色でシンプルに自動スクロールさせているように見えて、一文字ずつくるくる回る箇所もある神戸女学院大学 音楽学部音楽学科の Web サイト。

KAFEA TERRA

KAFEA TERRAの Web サイトでは、テキストが背景に入り込んだり、通常とは逆向きに動いたり、スクロールに合わせて動いたりと、いろんなバリエーションがあります。

NUTION

画像を、左右だけでなく上下にも、ゆったりと動かしているNUTIONの Web サイト。白黒ベースのデザインを動きが彩ります。

CREATORS MATCH Corp

CREATORS MATCH Corpの Web サイトでは、塗りのものとアウトラインのものを逆方向で動かしているところがおもしろいですね。

電通ランウェイ

行ごとに速度を変えていたり、ブラシで書いたようなラインと組み合わさって、ダイナミックな動きが印象的な電通ランウェイの Web サイト。

D.A.Consortium RECRUIT SITE

D.A.Consortium RECRUIT SITEでは、カーソルを合わせた箇所に大きく帯が現れて、自動スクロールするテキストを表示させています。

Futicons

Futiconsの Web サイトは、テキストではありませんが、画面いっぱいに動く画像を配置。行ごとに動かす向きを変えてにぎやかに装飾しています。

画面全体が見づらくならないように、適度に利用してみたい動きですね！ぜひ試してみてください！