跑马灯滚动

{
  "slug": "marquee-scroll",
  "name": "跑马灯滚动",
  "nameEn": "Marquee Scroll",
  "description": "文字或内容水平无限循环滚动，常用于公告栏、品牌展示和合作伙伴列表。",
  "descriptionEn": "Content scrolls horizontally in an infinite loop. Common for announcements, brand logos, and partner lists.",
  "category": "text",
  "tags": [
    "marquee",
    "scroll",
    "infinite",
    "loop",
    "horizontal"
  ],
  "trigger": "continuous",
  "difficulty": "intermediate",
  "duration": "20s",
  "easing": "linear",
  "cssProperties": [
    "transform"
  ],
  "isGPUAccelerated": true,
  "previewBg": "light",
  "keywords": [
    "marquee",
    "scroll",
    "ticker",
    "infinite loop",
    "horizontal scroll",
    "brand logo"
  ],
  "useCases": [
    "Partner/client logo strip",
    "News ticker",
    "Feature announcement bar",
    "Social proof scroll"
  ],
  "relatedAnimations": [
    "text-gradient-flow",
    "stagger-children"
  ],
  "recommendedStyles": [
    "corporate-clean",
    "minimalist-flat",
    "dark-mode"
  ],
  "codeSnippets": [
    {
      "label": "CSS Keyframes",
      "language": "css",
      "code": "@keyframes marquee-scroll {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-50%);\n  }\n}\n\n/* Wrapper hides overflow, inner track holds duplicated content */\n.marquee {\n  overflow: hidden;\n  white-space: nowrap;\n}\n\n.marquee-track {\n  display: inline-flex;\n  will-change: transform;\n  animation: marquee-scroll 20s linear infinite;\n}\n\n/* Duplicate content inside .marquee-track for seamless loop:\n   <div class=\"marquee\">\n     <div class=\"marquee-track\">\n       <span>Item 1 - Item 2 - Item 3 -&nbsp;</span>\n       <span>Item 1 - Item 2 - Item 3 -&nbsp;</span>\n     </div>\n   </div>\n*/\n\n.marquee:hover .marquee-track {\n  animation-play-state: paused;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .marquee-track {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Tailwind CSS",
      "language": "css",
      "code": "/* Add to your global CSS or Tailwind v4 theme */\n@keyframes marquee-scroll {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-50%);\n  }\n}\n\n@utility animate-marquee-scroll {\n  will-change: transform;\n  animation: marquee-scroll 20s linear infinite;\n}\n\n/* Usage:\n   <div class=\"overflow-hidden whitespace-nowrap\">\n     <div class=\"inline-flex animate-marquee-scroll hover:[animation-play-state:paused]\">\n       <span class=\"px-4\">Item 1</span>\n       <span class=\"px-4\">Item 2</span>\n       <!-- Duplicate items for seamless loop -->\n       <span class=\"px-4\">Item 1</span>\n       <span class=\"px-4\">Item 2</span>\n     </div>\n   </div>\n*/\n\n@media (prefers-reduced-motion: reduce) {\n  .marquee-scroll {\n    animation: none;\n  }\n}"
    },
    {
      "label": "Framer Motion",
      "language": "tsx",
      "code": "import { motion } from \"framer-motion\";\n\n// Tip: respect user's motion preferences\n// import { useReducedMotion } from \"framer-motion\";\n// const reduced = useReducedMotion();\n// if (reduced) return <div className=\"static-fallback\">{children}</div>;\n\nfunction Marquee({ children }: { children: React.ReactNode }) {\n  return (\n    <div style={{ overflow: \"hidden\", whiteSpace: \"nowrap\" }}>\n      <motion.div\n        style={{ display: \"inline-flex\" }}\n        animate={{ x: [\"0%\", \"-50%\"] }}\n        transition={{\n          x: {\n            duration: 20,\n            ease: \"linear\",\n            repeat: Infinity,\n          },\n        }}\n      >\n        {/* Render children twice for seamless loop */}\n        {children}\n        {children}\n      </motion.div>\n    </div>\n  );\n}"
    }
  ]
}