Page Marquee
A component for creating smooth, animated scrolling content in horizontal or vertical directions.
Overview
The Page Marquee component creates an infinite scrolling animation effect for content, perfect for displaying announcements, social media feeds, or any repeating content. It supports both horizontal and vertical orientations, with customizable animation settings.
Usage
Basic Example
Reverse Direction
Vertical Orientation
With Text Content
Vue
React
Angular
Svelte
Props
The direction of the marquee animation.
Whether to pause the animation when hovering over the marquee.
Whether to reverse the animation direction.
The number of times to repeat the content.
Whether to show a gradient overlay at the edges.
Additional classes to apply to the marquee container.
Slots
The content to be displayed in the marquee. Can include any valid HTML, components, or text.
Best Practices
- Content Spacing:
- Ensure consistent spacing between items
- Use appropriate padding and margins
- Consider the content size relative to the container
- Animation Performance:
- Keep content lightweight to maintain smooth animations
- Use appropriate image sizes and optimizations
- Consider reducing repeat count for heavy content
- Accessibility:
- Provide alternative ways to access the content
- Consider users who may be sensitive to motion
- Use appropriate ARIA labels when needed
- Responsive Design:
- Test the marquee at different screen sizes
- Adjust content size and spacing for mobile devices
- Consider orientation changes on different devices