WEB DESIGN ATLAS / 28
Transforme uma ideia visual em um pedido claro.
Compare 28 termos com exemplos visuais originais. Encontre um padrão, teste o comportamento e leve a instrução à sua IA ou ao designer.
Referências de UI e seleção ↗Role a página para baixo para avançar os efeitos e para cima para voltar. Ative Reduzir movimento para ver exemplos estáticos.
28 resultados
Nenhum exemplo corresponde. Mude a busca ou a categoria.
Alinha itens em linhas e colunas.
Quando usar Comparar itens semelhantes
Implemente este efeito. Grade / Grid. Alinha itens em linhas e colunas. Comparar itens semelhantes. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Combina células de tamanhos diferentes.
Quando usar Distribuir espaço por função
Implemente este efeito. Grade bento / Bento grid. Combina células de tamanhos diferentes. Distribuir espaço por função. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Divide a tela em dois painéis.
Quando usar Relacionar texto e imagem
Implemente este efeito. Tela dividida / Split screen. Divide a tela em dois painéis. Relacionar texto e imagem. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Usa larguras e posições diferentes.
Quando usar Destacar um elemento
Implemente este efeito. Layout assimétrico / Asymmetric layout. Usa larguras e posições diferentes. Destacar um elemento. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Deixa espaço ao redor dos elementos.
Quando usar Separar grupos de informações
Implemente este efeito. Espaço em branco / Whitespace. Deixa espaço ao redor dos elementos. Separar grupos de informações. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Combina título grande e colunas.
Quando usar Orientar a ordem de leitura
Implemente este efeito. Layout editorial / Editorial layout. Combina título grande e colunas. Orientar a ordem de leitura. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Desfoca o fundo atrás de um painel translúcido.
Quando usar Sobrepor um painel secundário
Implemente este efeito. Glassmorphism. Desfoca o fundo atrás de um painel translúcido. Sobrepor um painel secundário. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Sugere relevo com sombras claras e escuras.
Quando usar Dar profundidade suave a um painel decorativo
Implemente este efeito. Neumorfismo / Neumorphism. Sugere relevo com sombras claras e escuras. Dar profundidade suave a um painel decorativo. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Usa contornos grossos e sombras deslocadas.
Quando usar Criar separação visual forte
Implemente este efeito. Neobrutalismo / Neo-brutalism. Usa contornos grossos e sombras deslocadas. Criar separação visual forte. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Mistura cores de forma contínua.
Quando usar Variar a cor de fundos e destaques
Implemente este efeito. Gradiente / Gradient. Mistura cores de forma contínua. Variar a cor de fundos e destaques. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Mapeia luzes e sombras para duas cores.
Quando usar Unificar o tratamento das imagens
Implemente este efeito. Duotone. Mapeia luzes e sombras para duas cores. Unificar o tratamento das imagens. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Desenha apenas o contorno das letras.
Quando usar Criar um título decorativo curto
Implemente este efeito. Tipografia de contorno / Outline typography. Desenha apenas o contorno das letras. Criar um título decorativo curto. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Aparece gradualmente a partir da transparência.
Quando usar Apresentar um elemento suavemente
Implemente este efeito. Fade-in. Aparece gradualmente a partir da transparência. Apresentar um elemento suavemente. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Entra a partir de uma posição deslocada.
Quando usar Mostrar a direção de entrada
Implemente este efeito. Entrada deslizante / Slide-in. Entra a partir de uma posição deslocada. Mostrar a direção de entrada. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Mostra elementos com atrasos sucessivos.
Quando usar Mostrar a ordem dos itens
Implemente este efeito. Animação escalonada / Stagger. Mostra elementos com atrasos sucessivos. Mostrar a ordem dos itens. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Revela uma linha de baixo para cima em uma área recortada.
Quando usar Apresentar um título curto
Implemente este efeito. Revelação de texto / Text reveal. Revela uma linha de baixo para cima em uma área recortada. Apresentar um título curto. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Amplia a área visível para revelar conteúdo.
Quando usar Apresentar uma imagem
Implemente este efeito. Revelação com máscara / Mask reveal. Amplia a área visível para revelar conteúdo. Apresentar uma imagem. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Passa de desfocado para nítido.
Quando usar Adicionar um efeito breve de entrada
Implemente este efeito. Entrada com desfoque / Blur-in. Passa de desfocado para nítido. Adicionar um efeito breve de entrada. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Mostra o texto caractere por caractere.
Quando usar Revelar uma mensagem curta
Implemente este efeito. Máquina de escrever / Typewriter. Mostra o texto caractere por caractere. Revelar uma mensagem curta. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Aumenta um número até seu valor final.
Quando usar Destacar um resultado numérico
Implemente este efeito. Contagem crescente / Count-up. Aumenta um número até seu valor final. Destacar um resultado numérico. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Muda conforme o progresso da rolagem.
Quando usar Mostrar a posição de leitura
Implemente este efeito. Animação vinculada à rolagem / Scroll-linked animation. Muda conforme o progresso da rolagem. Mostrar a posição de leitura. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Move primeiro plano e fundo em velocidades diferentes.
Quando usar Sugerir profundidade decorativa
Implemente este efeito. Paralaxe / Parallax. Move primeiro plano e fundo em velocidades diferentes. Sugerir profundidade decorativa. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Amplia uma imagem conforme a rolagem.
Quando usar Destacar um detalhe da imagem
Implemente este efeito. Zoom na rolagem / Scroll zoom. Amplia uma imagem conforme a rolagem. Destacar um detalhe da imagem. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Troca quadros ordenados conforme a rolagem.
Quando usar Mostrar mudanças de forma em etapas
Implemente este efeito. Sequência de imagens / Image sequence. Troca quadros ordenados conforme a rolagem. Mostrar mudanças de forma em etapas. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Mantém um elemento na posição dentro do contêiner.
Quando usar Manter uma imagem junto ao texto
Implemente este efeito. Posição aderente / Sticky. Mantém um elemento na posição dentro do contêiner. Manter uma imagem junto ao texto. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Alinha a uma seção após rolar.
Quando usar Comparar cartões um a um
Implemente este efeito. Encaixe da rolagem / Scroll snap. Alinha a uma seção após rolar. Comparar cartões um a um. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Desenha uma linha a partir do início.
Quando usar Mostrar um caminho ou conexão
Implemente este efeito. Traçado SVG / SVG line draw. Desenha uma linha a partir do início. Mostrar um caminho ou conexão. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Role a página para testar
Move uma linha de texto horizontalmente.
Quando usar Repetir palavras decorativas curtas
Implemente este efeito. Marquee. Move uma linha de texto horizontalmente. Repetir palavras decorativas curtas. Especifique o alvo e o gatilho. Para efeitos ligados à rolagem, use a posição do elemento na página e a distância percorrida, e reverta ao rolar para cima. Mantenha o texto essencial legível. Suporte telas de 320px e teclado. Mostre o estado final estático com movimento reduzido.
Como usar os termos
Distância, duração e direção mudam o resultado. Especifique elemento, ação, gatilho, intensidade, duração e repetição. Verifique telas estreitas e movimento reduzido.
Nomes informais podem não ter uma definição padrão única. Cada descrição e exemplo explica o significado usado aqui.
Preserve o contraste e a identificação dos controles ao adicionar efeitos de superfície. Use movimentos breves, mantenha o conteúdo disponível e ofereça uma opção de parar. Ofereça uma vista estática para paralaxe e zoom.
As demos usam conteúdo fictício e formas originais. Explicações e instruções estão no HTML. O HTML, CSS e JS das demos estão disponíveis sob MIT, separado do restante do site.
Código da demo ↓ MIT