Marquee

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

横方向に流れるテロップ表示部品です。content パーツを内部で 2 回複製しシームレスループを実現します。root:hover/:focus-within で常時一時停止し、prefers-reduced-motion: reduce では単なる停止に留まらず、複製 content の除去・可視コピーの折り返し表示（全文が読める）・両端フェードの解除まで行います。速度（--fandhe-marquee-duration）・方向（--fandhe-marquee-direction）・間隔（--fandhe-marquee-gap、既定 --fandhe-space-4）・両端フェード（--fandhe-marquee-fade、既定 0px）・内側余白（--fandhe-marquee-padding、既定 0）は CSS custom property の上書きで調整できます。

Demo

CSS のみ（JS ゼロ）の自動流動テキストです。direction（既定/end）でスクロール方向を切り替え、hover/focus-within で常時一時停止、prefers-reduced-motion: reduce 環境では停止して折り返し全文表示・両端フェード解除します。decorative: true で装飾用途（aria-hidden）に、--fandhe-marquee-duration の上書きで速度を、--fandhe-marquee-gap の上書きで間隔を調整できます。--fandhe-marquee-fade（既定 0px）を上書きすると両端がフェードし、--fandhe-marquee-padding（既定 0）を上書きすると root の内側余白が付きます。

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

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

両端フェード（--fandhe-marquee-fade）の例です。

内側余白（--fandhe-marquee-padding）の例です。

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 で (1) アニメーションを停止し、(2) 複製 content を除去し、(3) 可視コピーを折り返して全文表示し、(4) 両端フェードを解除する（イシュー #1583、marquee.rs テスト css_output_declares_reduced_motion_media_query）
両端フェードは root の mask-image（--fandhe-marquee-fade、既定 0px = 無効）で opt-in 提供する（イシュー #1582、marquee.rs テスト css_output_declares_root_mask_image_fade）
root の内側余白は --fandhe-marquee-padding（既定 0）の custom property hook で opt-in 提供する（イシュー #1583、marquee.rs テスト css_output_declares_root_padding_hook）

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-fade`	`0px`
`--fandhe-marquee-gap`	`var(--fandhe-space-4)`
`--fandhe-marquee-padding`	`0`

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）。