Scroll Reveal
Description
The Scroll Reveal component is designed to create an engaging text reveal effect as the user scrolls through the page. It allows for customizable text content and theme options, making it versatile for various design needs. This component is ideal for highlighting important information or creating visual interest in long-form content.
Installation
bash
sabaccui add scrollReveal
Usage
Here are examples of how to use the Scroll Reveal component with different configurations:
Basic usage with default theme
Preview
Thistextwillberevealedonscroll
Using a custom theme
Preview
Discoverourlatestinnovations
With a longer text and secondary theme
Preview
Loremipsumdolorsitamet,consecteturadipiscingelit.Seddoeiusmodtemporincididuntutlaboreetdoloremagnaaliqua.
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
text | textarea | The content to be revealed. Can include multiple lines of text. | "" (empty string) |
theme | option | The color theme for the text. Options include: White, Black, Primary, Secondary. | "white" |
Notes
- The component uses a computed property to determine the CSS class for the selected theme.
- The RevealText component is used internally to handle the actual reveal animation.
- The component is nestable, allowing it to be used within other components.
- It is tagged as an "Organism" in the component hierarchy.
Best Practices:
- Use concise and impactful text for the best visual effect.
- Choose a theme that contrasts well with the background for readability.
- Consider the surrounding content when placing this component to ensure it doesn't interfere with other interactive elements.
- Test the reveal effect on various device sizes to ensure a consistent user experience.