Marquee
High-performance, seamless scrolling marquee component. Driven by CSS animations, supports horizontal/vertical scrolling, dynamic content filling, and ultimate interaction experience.
Basic Usage
The simplest infinite horizontal scrolling.
Vertical Display
Set direction="vertical" for vertical scrolling. Note: A specific height is usually required for the container in vertical mode.
Edge Gradient
Enable the gradient attribute to add a gradient fade on both sides of the scroll container, making edge transitions smoother and more natural. You can customize the color and width.
Interaction and State Control
Supports pause on hover, event listening, and manual play control. Use the play attribute for precise animation control, and the cycle-complete event to capture the end of each scrolling cycle.
Constant Speed
In scenarios with variable content length, use speed (px/s) instead of duration to ensure different content lengths scroll at exactly the same speed, avoiding visual jitter.
Viewport Sensing and Loop Delay
Use pause-on-hidden to automatically stop animation when the component leaves the viewport to save performance. Use delay and loop-delay attributes for elegant pauses before the first cycle and between each subsequent cycle.
Professional Case: Stock Ticker
Combine gradients and custom styles to create a professional data display.
Use in Nuxt
YH-UI perfectly adapts to Nuxt 3. You can directly use it in app.vue or any page.
Auto-import
If you use the @yh-ui/nuxt module, YhMarquee will be automatically loaded on demand with full styles.
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
| direction | Scroll direction | 'horizontal' | 'vertical' | 'horizontal' |
| duration | Duration for one scrolling cycle (seconds) | number | 20 |
| reverse | Whether to scroll in reverse | boolean | false |
| pause-on-hover | Whether to pause on hover | boolean | true |
| pause-on-click | Whether to pause on click | boolean | false |
| gap | Gap between content items | number | string | 0 |
| gradient | Whether to enable edge gradient fade | boolean | false |
| gradient-color | Gradient fade color | string | '#ffffff' |
| gradient-width | Width of the gradient fade | number | string | '40px' |
| auto-fill | Whether to auto-fill when content is insufficient | boolean | true |
| play | Whether to play animation | boolean | true |
| loop | Loop count (0 for infinite) | number | 0 |
| speed | Scrolling speed (px/s), will override duration if set | number | 0 |
| delay | Delay before starting animation (seconds) | number | 0 |
| loop-delay | Pause duration after each cycle ends (seconds) | number | 0 |
| pause-on-hidden | Whether to auto-pause when component leaves viewport | boolean | true |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| cycle-complete | Triggered when a cycle completes | - |
Slots
| Slot Name | Description |
|---|---|
| default | Content to be scrolled |
Expose
| Name | Description | Type |
|---|---|---|
| calculateClones | Manually trigger clone count calculation (useful after dynamic content resize) | () => Promise<void> |
| containerRef | DOM ref to the outer container | HTMLElement | null |
| contentRef | DOM ref to the content container | HTMLElement | null |
Theme Variables
All color variables are integrated with the global theme system and support dark mode:
| Variable | Default | Description |
|---|---|---|
--yh-marquee-gap | 0px | Gap between content items |
--yh-marquee-duration | 20s | Animation duration |
--yh-marquee-iteration-count | infinite | Animation iteration count |
--yh-marquee-direction | normal | Animation playback direction |
--yh-marquee-play-state | running | Animation play state |
--yh-marquee-gradient-color | var(--yh-bg-color) | Edge gradient color (follows theme background) |
--yh-marquee-gradient-width | 40px | Edge gradient width |
--yh-marquee-clone-count | 1 | Internally calculated clone multiplier (readonly) |
Type Exports
| Name | Description |
|---|---|
YhMarqueeProps | Component props type |
YhMarqueeEmits | Component emits type |
YhMarqueeSlots | Component slots type |
YhMarqueeExpose | Component expose type |
YhMarqueeDirection | Direction union type |
YhMarqueeInstance | Component instance type |