Image & Media

Image Reveal Wipe

Também chamada Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll

Uma imagem é revelada por uma cobertura que encolhe ou pela borda de uma máscara que se expande.

Imagens editoriais ao rolar a página

  • directional wipe
  • circle mask
  • curtain cover

Ver o código da demo

Prompt

Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.

Adicione um "Image Reveal Wipe" (também chamado mask reveal ou clip-path reveal) em [onde].
Quando a imagem entrar na tela ao rolar, uma cobertura deve se retirar a partir de um lado e revelá-la suavemente no ritmo da rolagem, para que fique totalmente visível bem antes de sair da tela.
Reserve o espaço da imagem para o layout não pular e mostre a imagem totalmente revelada se o usuário preferir movimento reduzido (prefers-reduced-motion).

Substitua [onde] pela parte da sua página e cole o prompt no seu agente de IA. Cada prompt traz o nome da animação, então da próxima vez basta pedir pelo nome.