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

2023年2月7日
CSS, JavaScript, Webサイト制作, Webデザイン

最近のWebサイトギャラリー見てたら、懐かしい動きを目にする機会が増えてきました。テキストが右から左に自動スクロールするという、かつての「marquee」タグを彷彿させる動きです。今回はこの自動スクロールテキストに注目してみます。

↑私が10年以上利用している会計ソフト！

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); }
}

See the Pen
Marquee effect CSS by Mana (@manabox)
on CodePen.

JavaScriptバージョン

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

See the Pen
Marquee effect JavaScript (Web Animations API) by Mana (@manabox)
on CodePen.

自動スクロールテキストを実装している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サイトは、テキストではありませんが、画面いっぱいに動く画像を配置。行ごとに動かす向きを変えてにぎやかに装飾しています。

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

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

marquee とは