Overlap Hero
Description
The Overlap Hero component is a versatile and visually engaging hero section that combines two sets of content blocks with a scroll-based animation effect. It features a primary content area that scales and fades out as the user scrolls, revealing an overlapping content area beneath. This component is ideal for creating impactful introductions to web pages with smooth transitions between content sections.
Installation
bash
sabaccui add overlapHero
Usage
Preview
Welcome to Our Website
Discover our amazing products and services
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
content | bloks | The primary content blocks that appear initially and scale/fade out on scroll. Restricted to components with tags 47877 and 47878. | [] |
overlap | bloks | The content blocks that appear underneath and are revealed as the primary content fades out. Restricted to components with tags 47877 and 47878. | [] |
Related Components
None specified.
Notes
- The component uses the
@vueuse/corelibrary for reactive element bounding and reduced motion preference detection. - The primary content area is positioned with
stickypositioning and has a scaling and opacity animation based on scroll progress. - The component respects user preferences for reduced motion, disabling animations if preferred.
- The overlap content will also fade out as it leaves the viewport, creating a smooth transition effect.
Best Practices:
- Ensure that the content in both the
contentandoverlapsections complement each other and provide a smooth transition of information or visuals. - Keep the primary content (
contentsection) concise to maintain the effectiveness of the scaling animation. - Test the component across various device sizes to ensure the animation and layout remain effective on different screen dimensions.
- Consider using this component sparingly, typically at the top of key pages, to maintain its impact and avoid overuse throughout a site.