Web Design Atlas / Palavras e exemplos visuais de design web

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Implemente este efeito. Entrada com escala / Scale-in. Um elemento aparece enquanto cresce. Apresentar um cartã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.

Implemente este efeito. Entrada com rotação / Rotate-in. Um elemento inclinado gira ao aparecer. Introduzir um pequeno adorno. 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.

Implemente este efeito. Giro 3D / 3D flip. Um cartão gira em torno de um eixo em profundidade. Mostrar mudanças de orientaçã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.

Implemente este efeito. Revelação circular / Circular reveal. Amplia uma janela circular para revelar conteúdo. Mostrar uma imagem a partir do centro. 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.

Implemente este efeito. Preenchimento de texto / Text fill. Preenche progressivamente o interior das letras. Mostrar progresso em 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.

Implemente este efeito. Trajetória de movimento / Motion path. Move um elemento por um caminho definido. Ilustrar uma rota ou processo. 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.

Implemente este efeito. Transformação de formas / Shape morphing. Move vértices para mudar uma figura. Mostrar relação entre formas. 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.

Implemente este efeito. Transição de cor / Color transition. Muda gradualmente a cor de fundo. Indicar uma mudança de seçã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.

Implemente este efeito. Elevação ao apontar / Hover lift. Eleva um elemento ao apontar ou focar. Indicar um alvo acionável. 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.

Implemente este efeito. Anel de foco / Focus ring. Contorna o controle em foco. Mostrar a posição do teclado. 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.

Implemente este efeito. Acordeão / Accordion. Abre ou fecha o conteúdo pelo título. Ler informações extras quando necessá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.

Implemente este efeito. Abas / Tabs. Muda para o painel do título selecionado. Alternar conteúdo no mesmo lugar. 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.

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.

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.

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.

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.

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.

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.

Implemente este efeito. Layout em alvenaria / Masonry layout. Empilha itens de alturas diferentes. Comparar uma galeria. 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.

Implemente este efeito. Layout sobreposto / Overlapping layout. Posiciona elementos em camadas sobrepostas. Relacionar conteúdo principal e de apoio. 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.

Implemente este efeito. Layout até a borda / Full-bleed layout. Estende a imagem ou o fundo até as bordas. Destacar 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.

Implemente este efeito. Layout de cartões / Card layout. Agrupa informações relacionadas em cartões. Definir os limites de cada item. 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.

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.

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.

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.

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.

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.

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.

Implemente este efeito. Sombra suave / Soft shadow. Usa uma sombra difusa para sugerir elevação. Distinguir uma superfície acionável. 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.

Implemente este efeito. Textura de grão / Grain texture. Adiciona partículas finas a uma superfície. Suavizar um fundo plano. 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.

Implemente este efeito. Gradiente de malha / Mesh gradient. Mistura várias cores suavemente em uma superfície. Criar um campo de cores. 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.

Implemente este efeito. Meio-tom / Halftone. Usa pontos para sugerir tons. Criar uma textura de impressã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.