Adicione um efeito de falha ao seu site

Contente

• 01. Adicione o código à tag do corpo da sua página
• 02. Estilo do display
• 03. Exibindo a falha
• 04. Segure tudo
• 05. Executando a falha
• 06. De volta à normalidade
• Compre já o seu ingresso para o Generate New York

Uma ótima maneira de chamar a atenção - e mantê-la - é criar um layout de site que mostre seus talentos desde o início (um construtor de sites decente pode ajudar na construção). O site da agência da web da Ucrânia Vintage é um ótimo exemplo disso, atraindo você para seu portfólio de design de RV com uma combinação atraente de um logotipo pulsante construído a partir de partículas de vidro e um pequeno defeito que é ativado ao pairar.

• Animação da web: nenhum código necessário

Um simples efeito de falha usado com moderação pode dar a seu site um pouco mais de interesse visual vital e é surpreendentemente fácil de implementar. Veja como fazer.

Tem um site complexo em mente? Certifique-se de que sua hospedagem na web está à altura da tarefa. E mantenha seus arquivos de design seguros no armazenamento em nuvem.

Baixe os arquivos para este tutorial.

01. Adicione o código à tag do corpo da sua página

A criação de um efeito de falha simples pode ser feita de muitas maneiras diferentes. Aqui, faremos isso com um GIF animado sobre o texto, que será ativado e desativado na tela. Primeiro, adicione este código à tag do corpo da sua página.

div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>

02. Estilo do display

O conteúdo usará uma fonte específica do Google Fonts chamada Work Sans. Pegue o link de lá e coloque-o na seção principal; em seguida, adicione o CSS às tags de estilo ou a um arquivo CSS separado. A página é feita em preto com texto branco e o titular é estilizado para o texto.

corpo {plano de fundo: # 000; font-family: 'Work Sans', sans-serif; cor: #fff; } #holder {font-size: 6em; largura: 500px; altura: 300px; margem: 0 automático; posição: relativa; }

03. Exibindo a falha

O efeito de falha será uma imagem de fundo colocada diretamente sobre o texto. A parte importante aqui é que ele se torna invisível reduzindo a opacidade a zero para que não apareça até que o usuário interaja com o texto.

#glitch {posição: absoluta; topo: 0; esquerda: 0; índice z: 10; largura: 100%; altura: 100%; background: url (glitch.gif); opacidade: 0; }

04. Segure tudo

Adicione tags de script ao final da seção do corpo e crie uma referência em cache para o div 'glitch' no documento. Então, uma variável chamada 'over' é definida como falsa. Isso será ativado e desativado quando o usuário mover o texto.

var gl = document.getElementById ("glitch"); var over = false;

05. Executando a falha

A função de falha é chamada quando o mouse se move sobre o texto. Se a falha não estiver funcionando, a visibilidade da falha será ativada e desligada após um segundo e meio.Você pode experimentar isso e usar um número aleatório para torná-lo mais imprevisível.

função glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}

06. De volta à normalidade

O efeito de falha não deve permanecer, pois seria muito irritante para o usuário, mas funciona bem como um elemento interativo. Aqui, o código redefine a opacidade de volta a zero para que não fique visível na parte superior do texto.

função normal () {gl.style.opacity = "0"; }

Compre já o seu ingresso para o Generate New York

O evento de web design de três dias Generate New York está de volta. Ocorrendo entre 25 e 27 de abril de 2018, os palestrantes principais incluem Dan Mall da SuperFriendly, o consultor de animação da web Val Head, o desenvolvedor de JavaScript full-stack Wes Bos e muito mais. Há também um dia inteiro de workshops e oportunidades valiosas de networking - não perca. Pegue seu tíquete do Generate agora.

Este artigo foi publicado originalmente na edição 270 da revista de web design criativo Web Designer. Compre a edição 270 aqui ou inscreva-se no Web Designer aqui.