Scroll Media Section
Description
The Scroll Media Section component is a versatile and dynamic element designed to create visually engaging sections featuring media (images or videos) with overlaid content. It offers two modes of operation: static and scroll-by, allowing for flexible layout options. The component supports various content alignments and includes parallax effects for enhanced visual appeal.
Installation
bash
sabaccui add scrollMediaSection
Usage
Static mode with content end-aligned
Preview
Welcome to Our Website
Discover our amazing products and services
Scroll-by mode with centered content
Preview
Welcome to Our Website
Discover our amazing products and services
Schema
| Field | Type | Description | Default |
|---|---|---|---|
media | asset | The image or video to be displayed as the background | - |
align | option | Alignment of the content within the section | center |
content | bloks | The content to be displayed over the media | - |
mode | option | The display mode of the section | static |
media: Accepts image or video files. For videos, supported formats are mp4, webm, and ogg.align: Options are "Start", "Center", or "End", controlling the vertical alignment of content.content: Allows nested components tagged as "Molecule" or "Organism".mode: Can be set to "Static" for full-height sections or "Scroll-By" for scrollable sections with parallax effect.
Related Components
No related components specified in the provided information
Notes
- The component uses Vue 3 Composition API with
<script setup>. - It incorporates
@vueuse/corefor reduced motion preferences and window scroll tracking. - Parallax effect is applied to the media when in "scroll-by" mode.
- The component automatically detects if the media is a video or an image.
- An overlay is applied to the media, with opacity changing based on scroll position in "scroll-by" mode.
Best Practices:
- Ensure that the media asset is high quality and suitable for full-screen display.
- Consider accessibility by providing meaningful alt text for images and aria-labels for videos.
- Use the "scroll-by" mode sparingly to avoid overwhelming the user with too many parallax effects.
- Test the component with various content lengths to ensure proper display in both modes.
- Be mindful of performance, especially when using video backgrounds on mobile devices.