Dual Marquee Text
逆方向2段マーキー
Generation Prompt
【対象要素】 - サイト内のテキスト1箇所(見出し・キャッチコピー・リード文等)に適用する 【演出内容】 - 2段の帯が上下に並び、それぞれ逆方向へ流れ続ける - 逆向きに動くことで、止まっている中央が強調される 【品質要件】 - 2段の速度は揃える(向きだけを逆にする) - 1周は12〜16秒。段の間隔を詰めすぎて読みにくくしない - prefers-reduced-motion 時は演出を無効化し、最初から完成した状態で表示する - 演出中も文字が判読できなくなる時間を作らない。レイアウトを揺らさない
[Target element] - Apply to one piece of text on your site (a heading, a tagline, a lead paragraph, etc.) [Motion] - Two stacked bands scroll continuously in opposite directions - The opposing motion draws attention to whatever sits still between them [Quality requirements] - Match the speed of both rows and reverse only the direction - One pass takes 12-16s. Do not crowd the rows so close that they become hard to read - When prefers-reduced-motion is set, disable the animation and show the finished state from the start - Never let the text become unreadable during the animation, and never shift the surrounding layout
Prompts and demo code are free to use in your own projects. See About.