Essa é a primeira coisa que eles procuram quando alternam entre as guias do navegador. Acabamos de dar uma das possíveis descrições do que é chamado de favicon. O espaço da tela que ocupa a guia de uma página da web é um recurso muito mais valioso do que muitas pessoas pensam. Se você trabalha bem com o rótulo, além de continuar desempenhando o papel de identificador da página, ele pode se tornar algo como um "quadro de mensagens" que informa exatamente o que está acontecendo na página.
FaviconOs favicons são, de fato, especialmente úteis quando se trata de guias inativas do navegador. Considere um exemplo.
Suponha que você envie fotos tiradas nas férias de verão recentes para um serviço em nuvem usando sua página da web. Enquanto as fotos estão sendo carregadas, você abre uma nova guia do navegador para encontrar detalhes sobre os lugares onde estava e usá-los nas legendas das fotos. Enquanto você procura tudo isso, um se apega ao outro e agora está assistindo Casey Neistat na sétima guia do navegador. Mas você não pode continuar com segurança sua maratona do YouTube. Você olha periodicamente para a página de serviço em nuvem para descobrir se suas fotos já foram enviadas.
Este é apenas o caso quando você pode ser criativo! E se pudéssemos alterar dinamicamente os pixels que compõem o favicon e exibir informações sobre o processo de upload de arquivos no atalho da página? De fato, é isso que faremos aqui.
Nos navegadores que suportam isso, é possível exibir algumas animações como um favicon usando JavaScript, o elemento HTML
<canvas> e regras de geometria antiga.
Aqui está a aparência da animação de carregamento na guia do navegador.
Imediatamente comece a trabalhar e comece com o mais simples. Adicione os elementos
<link> e
<canvas> ao código HTML da página:
<head> <link rel="icon" type="image/png" href="" width=32px> </head> <body> <canvas width=32 height=32></canvas> </body>
Ao usar esta técnica na prática, você provavelmente deseja ocultar o
<canvas> . Uma maneira de fazer isso é usar o atributo HTML
hidden :
<canvas hidden width=32 height=32></canvas>
Vou deixar o
<canvas> visível para que possamos ver como a animação é exibida simultaneamente no favicon e no
<canvas> . Ambos têm o tamanho de um favicon padrão - 32x32 pixels.
Para fins de demonstração, adicionaremos um botão à página, clicando no botão que inicia a animação. Adicione o seguinte ao código HTML da página:
<button>Load</button>
Agora vamos entrar no código JavaScript. Vamos verificar primeiro o suporte de
canvas :
onload = ()=> { canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); if (!!context) { } };
Próximo - conecte o manipulador de eventos de clique no botão, que será usado para iniciar a animação no
<canvas> :
button = document.querySelector('button'); button.addEventListener('click', function() { n = 0, loadingInterval = setInterval(drawLoader, 60); });
A entidade
drawLoader que passamos para
setInterval é uma função que será chamada em intervalos de 60 milissegundos e produzirá algo para o
<canvas> . Antes de escrevermos o código para esta função, vamos descrever o estilo de linha que usaremos para desenhar gradualmente um quadrado, que é um indicador de carregamento.
let gradient = context.createLinearGradient(0, 0, 32, 32); gradient.addColorStop(0, '#c7f0fe'); gradient.addColorStop(1, '#56d3c9'); context.strokeStyle = gradient; context.lineWidth = 8;
Na função
drawLoader desenharemos linhas com base em quantos por cento das etapas de animação já foram concluídas. No nosso caso, 1 passo de animação corresponde a 1%. Ou seja, durante os primeiros 25% das etapas, uma linha representando o lado superior do quadrado será exibida gradualmente. Os próximos 25% das etapas exibirão o lado direito do quadrado e assim por diante - 25% do tempo de animação de cada lado.
O efeito de animação é obtido apagando o conteúdo do
<canvas> e produzindo uma linha ligeiramente alongada em comparação com a etapa anterior. Em cada etapa da animação, depois que a saída da imagem para o
<canvas> termina, a imagem é rapidamente convertida para o formato PNG e definida como o ícone da página.
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){
Agora vamos fazer os cálculos que nos ajudarão a desenhar as linhas necessárias.
Aqui estão os dados usados para gerar gradualmente o lado superior do quadrado durante as primeiras 25 etapas da animação:
- O ponto de partida é o canto superior esquerdo da imagem (0,0).
- n é o número da etapa de animação atual.
- x é a coordenada
x do ponto final da linha na etapa atual da animação. - y é a coordenada
y do ponto final, que é 0.
Precisamos que, após completar todas as 25 etapas da animação, o valor de
x seja 32 (ou seja, o tamanho do favicon e o
<canvas> ). Portanto, procuraremos o valor de
x na etapa atual da animação
n acordo com a seguinte fórmula:
x = (32/25) * n
Veja como é o código do desenho de linha no qual esse raciocínio é implementado:
moveTo(0, 0); lineTo((32/25)*n, 0);
As 25 etapas de animação a seguir (desenhando o lado direito do quadrado) são executadas de maneira semelhante:
moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25));
E aqui está o código completo da função
drawLoader :
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){ moveTo(0, 0); lineTo((32/25)*n, 0); } else if(n>25 && n<=50){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25)); } else if(n>50 && n<= 75){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(-((32/25)*(n-75)), 32); } else if(n>75 && n<=100){ moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, 32); moveTo(32, 32); lineTo(0, 32); moveTo(0, 32); lineTo(0, -((32/25)*(n-100))); } stroke(); }
Sumário
Isso é tudo! O código para criar um indicador de carregamento retangular, que estávamos desenvolvendo aqui, pode ser encontrado
neste repositório. E
aqui está o repositório com o código indicador circular de download. De fato, você, como um indicador semelhante, pode usar qualquer forma. E se você trabalhar com o atributo de
fill do
<canvas> , isso permitirá obter efeitos interessantes.
Caros leitores! Existem projetos na sua área que se beneficiariam de favicons animados?
