No.033
TEXT CSS

Marquee Text

テキストが途切れず横へ流れ続けるマーキー効果。お知らせバー・ブランドティッカーに。ホバーで一時停止。

DEMO

SEE IT.COPY IT.BUILD IT.SEE IT.COPY IT.BUILD IT.

CODE

HTML
<div class="demo-stage" style="padding:0"><div class="mq-wrap"><div class="mq-track"><span>SEE IT.</span><span class="alt">COPY IT.</span><span>BUILD IT.</span><span>SEE IT.</span><span class="alt">COPY IT.</span><span>BUILD IT.</span></div></div></div>
CSS
.mq-wrap { overflow:hidden; white-space:nowrap; padding:2.4rem 0; background:#1A1A1A; }
.mq-track { display:inline-block; animation:mq-scroll 16s linear infinite; }
.mq-track span { font-family:'Oswald',sans-serif; font-size:3rem; font-weight:600; color:#fff; padding:0 1.6rem; }
.mq-track span.alt { color:transparent; -webkit-text-stroke:1.5px #E91B89; }
.mq-wrap:hover .mq-track { animation-play-state:paused; }
@keyframes mq-scroll { to { transform:translateX(-50%); } }
/* REDUCED-MOTION:v1 */
@media (prefers-reduced-motion: reduce) {
  .mq-track,
  .mq-wrap:hover .mq-track {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

AI PROMPT

Claude Code Cursor v0
PROMPT
テキストが横に流れ続けるマーキーを作って。.mq-trackにdisplay:inline-block、同じ内容を2回並べてtranslateX(0→-50%)を16s linear infinite。これで継ぎ目なくループする。コンテナはoverflow:hidden+white-space:nowrap。ホバーでanimation-play-state:pausedで停止。一部はtext-strokeで縁取り文字に。

Acceptance criteria: works with prefers-reduced-motion (animation disabled), zero console errors, zero layout shift

AIエージェントでの実装ガイド → Claude Code でWebアニメーションを実装する

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 UIデザインの心理学 ―わかりやすさ・使いやすさの法則 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない · AMAZONサブスク

📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

CREATOR TOOLS · スクール（PR）

🎬 Adobe Creative Cloud — After Effects / Photoshop 業界標準ツール → 💻 SkillHacks — プログラミング・動画編集オンラインスクール → 🚀 デイトラ — Web制作スクール・実案件レベルまで習得 →

※本サイトはアフィリエイトリンクを含みます。リンク経由のご購入・お申し込みで運営者が紹介料を受け取る場合があります。

RELATED EFFECTS

↗ MORE
→ INFINITE MOVING CARDSNEW · 別テーマ：カードを流す版 → LOGO MARQUEE → TEXT REVEAL → TYPEWRITER → NUMBER COUNT UP

マーキーテキスト（流れる文字）（Marquee Text）とは

テキストが途切れず横へ流れ続けるマーキー効果。お知らせバー・ブランドティッカーに。ホバーで一時停止。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。

使いどころ

ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。

FAQ

マーキーテキスト（流れる文字）（Marquee Text）はどんな効果ですか？

テキストが途切れず横へ流れ続けるマーキー効果。お知らせバー・ブランドティッカーに。ホバーで一時停止。ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く演出です。

Marquee TextはCSSだけで実装できますか？

はい。JavaScriptを使わずCSSの@keyframesアニメーションとtransition／transformだけで実装できます。

コードは無料で使えますか？

はい。Motion LabのコードスニペットとAIプロンプトは、クレジット表記なしで自由に使えます。コピーしてそのままプロジェクトに利用できます。