Como ele é
Conforme a página rola, cada cartão sobe e gruda perto do topo da tela, e o seguinte vem por cima dele, parando um pouco mais abaixo. Os de trás encolhem aos poucos e deixam a borda de cima à mostra, como fichas empilhadas numa mesa. No fim da rolagem, todos formam uma pilha em escada, com o mais recente inteiro na frente. Na demo são cinco cartões grandes e coloridos, em laranja, azul, coral e verde-petróleo, cada um com título, texto e foto, lado a lado em telas maiores.
Você pode estar procurando isto se pediu algo assim
- cards que vão se empilhando enquanto rolo a página
- mostrar as etapas do meu método uma por cima da outra ao rolar
- seção em que cada card gruda no topo e o próximo cobre o anterior
- efeito de pilha de cartões no scroll, tipo site de agência
- apresentar os serviços um de cada vez conforme a pessoa desce
- cartões que encolhem e ficam para trás quando o próximo chega
Também chamado de
- card stack
- cards empilhados
- sticky cards
- stacking cards
- pilha de cards no scroll
- scroll stack
- cards fixos na rolagem
Quando usar
- Etapas de um método ou processo de atendimento
- Lista de serviços em que cada um merece um cartão grande
- Página de produto que apresenta recursos um por vez
- História da empresa contada em capítulos
Quando evitar
- Conteúdo que a pessoa precisa comparar lado a lado, já que cada cartão cobre o anterior
- Páginas curtas, em que a pilha exige muita rolagem para pouco conteúdo
Como pedir para a sua IA
Crie uma seção de cartões que se empilham durante a rolagem para as etapas do meu método: cada cartão gruda no topo, o próximo cobre o anterior e os de trás encolhem um pouco, com altura adequada no celular e versão estática, em lista comum, para quem prefere menos movimento.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Card Stack
O Card Stack funciona dentro de uma área com rolagem própria?
Sim. Por padrão, o Card Stack acompanha a rolagem da página, mas aceita um contêiner próprio nas opções de rolagem, como na demo, que roda dentro de uma caixa de altura fixa. Cada cartão precisa de altura definida, por exemplo a altura da tela, para a pilha ter espaço para se formar.
Quantos cartões posso usar no Card Stack?
Não há limite no código: o Card Stack calcula o encolhimento de cada cartão pelo total informado em totalCards e pelo fator scaleMultiplier, que vem em 0,03. Com muitos cartões, os primeiros terminam bem menores; para listas longas, reduza esse fator.
O Card Stack respeita quem prefere menos movimento?
O componente original sempre anima o encolhimento durante a rolagem. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, o que no Card Stack pode ser uma lista comum de cartões, sem o efeito de pilha.
