marquee-loop

マーキーのスキル

使用する場面

• ロゴ、推薦コメント、スクリーンショット、タグ、短い機能チップをシームレスに無限ループさせるデザインが必要な場合。

ワークフロー

1. 項目の並びを複製し、末尾と先頭が完全に一致するようにします。
2. トラックを0から-50%まで線形変換でアニメーションさせます。
3. ループ中にジャンプが発生しないよう、項目の幅を一定に保ちます。
4. マーキーがセクションに入るとき、またはセクションから出るときに、端をマスクするかフェードさせます。
5. インタラクションが役立つ場合に限り、ホバー時にマーキーを一時停止するか、速度を落とします。
6. prefers-reduced-motion を尊重し、静的に折り返すか、非常にゆっくり動かします。

ガードレール

• ユーザーが注意深く読む必要のある、固有のコンテンツはアニメーションさせないでください。
• 移動するすべての項目に、大きくCPU負荷の高いシャドウやフィルターを使用しないでください。