Rolagem

Blur fade reveal

Conteúdo que chega fora de foco e transparente e fica mais nítido na primeira vez que é exibido, sem deslocar um único pixel.

Scroll to reveal

Como usar Blur fade reveal

Conteúdo que chega fora de foco e transparente e fica mais nítido na primeira vez que é exibido, sem deslocar um único pixel.

Teste a prévia com o mouse e o teclado. Verifique o foco visível e o layout em telas estreitas na sua página. Informe o número ou o identificador do componente ao seu agente de programação.

Propriedades: blurAmount, duration, delay, threshold, startOpacity

Quais frameworks estão disponíveis?

O catálogo inclui estas versões: react, vue, svelte, astro, html. A prévia desta página usa React.

Como acessar a implementação?

O código, as versões e os comandos de instalação estão disponíveis no painel acima.

Conecte seu agente

Componentes relacionados

1882Scroll focus columnRolagemUma coluna de rolagem onde cada linha desaparece e diminui à medida que sai da faixa de leitura e volta à presença total ao entrar, de modo que apenas o meio fica totalmente sólido.

1880Scroll entrance wrapperRolagemUm invólucro que mantém seus filhos estacionados até que eles apareçam, depois reproduz uma chegada facilitada e nunca a repete.

1891Stacked blur fadeRolagemUma borda do painel de rolagem que se dissolve na cor do painel através de vários desfoques de fundo empilhados em vez de uma faixa de desfoque plana.

1892Sticky zoom heroRolagemUm painel principal que permanece fixado enquanto você rola, empurrando o pano de fundo em sua direção até ficar desfocado e entregar a página ao texto abaixo.

1855Enter view revealRolagemBlocos que deslizam e desaparecem no momento em que aparecem e se reiniciam quando saem, de modo que a revelação é reproduzida novamente a cada passagem.

2838Scroll dim text revealRolagemUm parágrafo fica esmaecido e clareia palavra por palavra em sincronia com o progresso da rolagem, depois escurece novamente conforme você rola para trás.