縦方向マーキー（無限スクロール）
テキストが下から上へ途切れなく流れ続ける、縦方向の無限マーキーです。仕組みは、表示したい文言を 2 セット分つなげて並べ、 @keyframes で translateY を 0 から -50%（ちょうど 1 セット分）まで動かすこと。
解説
テキストが下から上へ途切れなく流れ続ける、縦方向の無限マーキーです。仕組みは、表示したい文言を 2 セット分つなげて並べ、@keyframes で translateY を 0 から -50%（ちょうど 1 セット分）まで動かすこと。半分進んだ時点で先頭と同じ並びに戻るため、継ぎ目を感じさせず無限ループに見えます。上下端は mask-image のグラデーションでふわっとフェードさせ、唐突な出入りを防いでいます。CSS のみで JavaScript は不要です。
使いどころ
- フッター直前に置くブランドメッセージやキャッチの帯
- 導入企業ロゴや受賞歴を縦に流すショーケース
- SNS フィード風に短文を循環させる演出
流れる速さはアニメーション時間で調整し、文言を増やすときは必ず同じ列を 2 回繰り返すのがループを破綻させないコツです。常時動き続けるため、動きが苦手なユーザー向けに prefers-reduced-motion でスクロールを止める指定を添えると、可読性とアクセシビリティを両立できます。
使用例・適したシーン
- 導入企業ロゴ流し
- キャッチコピー帯
- フッター直前装飾
よくある質問
流れる速さを変えるには？
速度は .vm__track のアニメーション時間（現在は 12s）で決まります。数値を大きくするとゆっくり、小さくすると速く流れます。文言量を増やしたときは、見やすい速度になるよう合わせて調整してください。
表示する文言を増やしても継ぎ目なく流れますか？
流れます。ただし同じ並びを 2 セット用意し、片方が完全に上へ抜けたタイミングでもう片方が続く必要があります。文言を足すときは両セットに同じものを加えてください。