Marquee

fandhe-frontend-pre-styled-ui の marquee mod が提供するスタイル済み Marquee 部品です。

横方向に流れるテロップ表示部品です。content パーツを内部で 2 回複製しシームレスループを実現します。root:hover/:focus-within で常時一時停止し、prefers-reduced-motion: reduce でアニメーションを停止します。

Demo

CSS のみ（JS ゼロ）の自動流動テキストです。direction（既定/end）でスクロール方向を切り替え、hover/focus-within で常時一時停止、prefers-reduced-motion: reduce 環境では停止します。decorative: true で装飾用途（aria-hidden）に、--fandhe-marquee-duration の上書きで速度を調整できます。

Fandhe frontend — CSS のみで動く自動流動テキストです。

逆方向スクロールの例です。

Features

content パーツを内部で 2 回複製しシームレスループを実現する（crates/pre-styled-ui/src/marquee.rs:1296-1298）
root:hover/:focus-within で常時一時停止する CSS を持つ（marquee.rs テスト css_output_declares_hover_and_focus_within_pause）
prefers-reduced-motion: reduce でアニメーションを停止する（marquee.rs テスト css_output_declares_reduced_motion_media_query）

Anatomy

root
  content
    item

API Reference

Arguments

Name	Type	Default	Description
decorative	bool	false	true なら root へ aria-hidden="true" を付与する（marquee.rs:184-191, 1341-1354）。
label	Option<&str>	None	decorative が false のときのみ有効な aria-label（marquee.rs:191, 1355-1357）。

CSS Variables

Variable	Default
--fandhe-marquee-direction	normal
--fandhe-marquee-duration	20s
--fandhe-marquee-gap	1rem

Examples

Labelled

aria-label 付きの非装飾 Marquee の例です。

Breaking news ticker

Accessibility

WAI-ARIA

Attribute	Description
aria-hidden="true"（decorative=true の root と複製 content） / aria-label（非 decorative時の root）	decorative/label の組み合わせで root の意味論を切り替える（marquee.rs:1341-1357）。複製した 2 個目の content は常に aria-hidden="true" + inert を持つ（marquee.rs:1360-1385）。