Before-After Slider
Também chamada Image comparison slider, Compare slider
Um divisor arrastável revela uma imagem de um lado e outra do outro.
Onde usar
Retoque de fotos, comparações de produtos
Variações
- horizontal
- vertical
- hover-controlled
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 "Before-After Slider" (também chamado image comparison slider ou compare slider) em [onde].
Duas imagens ficam sobrepostas e, ao arrastar um divisor vertical, aparece mais de uma e menos da outra; o divisor segue o ponteiro diretamente, sem atraso.
Comece com o divisor no meio e faça funcionar com toque e com as setas do teclado.Animações parecidas
Role aqui dentro
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.
Onde usar
Imagens editoriais ao rolar a página
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).ABCDEFGHIJKL
Mova o ponteiro aqui
Text Reveal Card
Também chamada Spotlight Text Reveal
Mover o ponteiro sobre um card revela um texto oculto sob uma borda de máscara ou um holofote.
Onde usar
Cards de recursos
Adicione um efeito "Text Reveal Card" (também chamado de spotlight text reveal) em [onde].
Conforme o ponteiro se move pelo card, uma borda vertical deve segui-lo de perto e revelar um texto oculto de um dos lados, de forma suave e direta, sem atraso.
Em telas de toque, onde não há ponteiro para seguir, deixe que arrastar ou tocar revele o texto oculto, e torne esse texto disponível para leitores de tela.A
Passe o mouse por cima
SVG Mask Reveal
Também chamada SVG Mask Effect, Clip-path Reveal, Spotlight Mask
Uma forma de máscara varre a área ou segue o ponteiro para revelar o conteúdo por baixo.
Onde usar
Revelação de imagens e conteúdo
Adicione um efeito de hover "SVG Mask Reveal" (também chamado clip-path reveal ou spotlight mask) em [onde].
Enquanto o ponteiro estiver por cima, uma máscara circular deve crescer a partir do centro e revelar o conteúdo por baixo, e fechar de novo quando o ponteiro sair: suave e bem rápido.
Mantenha as duas camadas exatamente do mesmo tamanho para nada se deslocar, e mostre a mesma revelação no foco do teclado e ao tocar.A
Arraste
Drag
Também chamada Draggable, Drag constraints
Um elemento segue o ponteiro ao ser arrastado e pode ser limitado a uma área ou a um eixo.
Onde usar
Sliders, cards ordenáveis
Adicione uma interação "Drag" (também chamada draggable ou drag constraints) em [onde].
O elemento deve seguir o ponteiro diretamente enquanto é arrastado, parar nas bordas da área permitida e voltar à posição de repouso com um pequeno quique ao ser solto.
Faça funcionar tanto com toque quanto com mouse, sem a página rolar por baixo, e ofereça uma forma de movê-lo pelo teclado.Mais em Image & Media
Passe o mouse por cima
Hover Zoom
Também chamada Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect
Uma imagem aumenta dentro da moldura ao passar o ponteiro, às vezes se deslocando com ele.
Onde usar
Cards de produto, miniaturas
Adicione um efeito "Hover Zoom" (também chamado image zoom on hover ou zoom-pan) em [onde].
Enquanto o ponteiro estiver sobre a imagem, ela deve aumentar lenta e suavemente dentro da moldura, que mantém o tamanho, e voltar suavemente quando o ponteiro sai.
Recorte a imagem na moldura para nada vazar do layout e mostre o mesmo zoom no foco do teclado.Ken Burns Effect
Também chamada Slow pan and zoom, Ken Burns, Kenburns
Uma imagem estática aproxima e se desloca lentamente dentro da moldura.
Onde usar
Slideshows de hero, fundos
Adicione um "Ken Burns Effect" (também chamado slow pan and zoom) em [onde].
Enquanto cada imagem é exibida, ela deve aproximar e se deslocar bem devagar em uma única direção, depois fazer um crossfade para a próxima imagem, que se move em outra direção: calmo e contínuo.
Faça cada imagem cobrir toda a moldura o tempo todo para nenhuma borda aparecer, e deixe as imagens paradas se o usuário preferir movimento reduzido (prefers-reduced-motion).