Card Stack
Description
The Card Stack component is a dynamic, scroll-activated element that displays a series of cards in a stacked layout. As the user scrolls, each card animates into view and then out, creating an engaging and interactive visual experience. The component allows for customization of card alignment and content, making it versatile for various use cases such as product showcases, feature highlights, or storytelling sections on a webpage.
Installation
bash
sabaccui add cardStack
Usage
Here's an example of how to use the Card Stack component in a Storyblok block:
Preview
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Schema
| Field Name | Type | Description | Default Value |
|---|---|---|---|
cards | bloks | An array of card components to be displayed in the stack. Only allows card components. | - |
align | option | Determines the alignment of the cards. Options are 'Left' or 'Right'. | "left" |
Notes
- The Card Stack component uses the
useScrollProgresscomposable to track scroll progress and animate the cards accordingly. - Each card in the stack is represented by a
CardStackCardcomponent, which handles the individual card layout and animations. - The component calculates progress for each card based on the scroll position, creating a smooth transition effect as cards enter and leave the viewport.
- CSS variables are used extensively to control the animations and transformations of each card.
Best Practices:
- Limit the number of cards in a stack to maintain performance and avoid overwhelming the user.
- Ensure that the content for each card is concise and visually appealing to make the most of the limited viewport space.
- Consider the overall page layout when choosing between left and right alignment for the card stack.
- Optimize images used in cards to ensure fast loading times and smooth scrolling performance.