Text Marquee
Description
The Text Marquee component is a versatile and visually appealing element that creates a scrolling text effect. It allows for multiple lines of text to be displayed in a marquee style, with customizable duration, color, and overlay options. This component is ideal for highlighting important messages, announcements, or creating dynamic visual interest on a page.
Installation
bash
sabaccui add textMarquee
Usage
Here are examples of how to use the Text Marquee component in a Storyblok block:
Basic Usage
Preview
Welcome to our website
Welcome to our website
Welcome to our website
Welcome to our website
Explore our services
Explore our services
Explore our services
Explore our services
Contact us today
Contact us today
Contact us today
Contact us today
Alternative Example
Preview
Summer Sale
Limited time offer
Summer Sale
Limited time offer
Summer Sale
Limited time offer
Summer Sale
Limited time offer
Up to 50% off
Up to 50% off
Up to 50% off
Up to 50% off
Schema
| Field | Type | Description | Default |
|---|---|---|---|
text | textarea | The content to be displayed in the marquee. Each line should be separated by a newline character. | - |
duration | number | The duration of the marquee animation in seconds. | - |
lines | number | The number of lines to display simultaneously. Minimum value is 1. | - |
color | option | The color scheme for the text. Options: Dark, Black, White, Light, Primary, Secondary | - |
overlay | boolean | Enables a gradient overlay effect on the marquee. | false |
Related Components
Notes
- The component splits the input text into arrays based on the specified number of lines.
- Alternate lines scroll in opposite directions for a dynamic effect.
Best Practices:
- Keep the text concise for better readability in the marquee format.
- Adjust the duration based on the length of your text to ensure it's readable.
- Use contrasting colors for better visibility, especially when using the overlay option.
- Consider the overall page design when choosing the number of lines to display.