C'est la première chose qu'ils recherchent lorsqu'ils basculent entre les onglets du navigateur. Nous venons de donner l'une des descriptions possibles de ce qu'on appelle un favicon. L'espace d'écran qui occupe l'onglet onglet d'une page Web est une ressource beaucoup plus précieuse que de nombreuses personnes ne le pensent. Si vous travaillez bien avec l'étiquette, alors, en plus de continuer à jouer le rôle de l'identifiant de la page, il peut devenir quelque chose comme un «babillard» qui vous indique exactement ce qui se passe sur la page.
FaviconLes favicons sont, en fait, particulièrement utiles lorsqu'il s'agit d'onglets de navigateur inactifs. Prenons un exemple.
Supposons que vous téléchargiez des photos prises lors de récentes vacances d'été sur un service cloud à l'aide de sa page Web. Pendant le téléchargement des photos, vous ouvrez un nouvel onglet de navigateur afin de trouver des détails sur les lieux où vous vous trouviez et les utilisez dans les légendes des photos. Pendant que vous cherchez tout cela, l'un s'accroche à l'autre, et maintenant vous regardez Casey Neistat sur le septième onglet du navigateur. Mais vous ne pouvez pas continuer votre marathon YouTube en toute sécurité. Vous consultez régulièrement la page du service cloud pour savoir si vos photos sont déjà téléchargées.
C'est juste le cas lorsque vous pouvez être créatif! Et si nous pouvions changer dynamiquement les pixels qui composent le favicon et afficher des informations sur le processus de téléchargement de fichier sur le raccourci de la page? En fait, c'est ce que nous ferons ici.
Dans les navigateurs qui le prennent en charge, vous pouvez afficher une animation sous forme de favicon à l'aide de JavaScript, de l'
<canvas> HTML
<canvas> et d'anciennes règles de géométrie.
Voici à quoi ressemble l'animation de chargement dans l'onglet du navigateur.
Mettez-vous immédiatement au travail et commencez par le plus simple. À savoir, ajoutez les éléments
<link> et
<canvas> au code HTML de la page:
<head> <link rel="icon" type="image/png" href="" width=32px> </head> <body> <canvas width=32 height=32></canvas> </body>
Lorsque vous utilisez cette technique dans la pratique, vous souhaiterez probablement masquer l'
<canvas> . Pour ce faire, vous pouvez utiliser l'attribut HTML
hidden :
<canvas hidden width=32 height=32></canvas>
Je vais laisser l'
<canvas> visible afin que nous puissions voir comment l'animation est affichée simultanément sur le favicon et sur l'
<canvas> . Les deux ont la taille d'un favicon standard - 32x32 pixels.
À des fins de démonstration, nous ajouterons un bouton à la page, en cliquant sur celui qui démarre l'animation. Ajoutez ce qui suit au code HTML de la page:
<button>Load</button>
Passons maintenant au code JavaScript. Vérifions d'abord le support du
canvas :
onload = ()=> { canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); if (!!context) { } };
Ensuite - connectez le gestionnaire d'événements de clic de bouton, qui sera utilisé pour démarrer l'animation dans l'
<canvas> :
button = document.querySelector('button'); button.addEventListener('click', function() { n = 0, loadingInterval = setInterval(drawLoader, 60); });
L'entité
drawLoader nous avons transmise à
setInterval est une fonction qui sera appelée à des intervalles de 60 millisecondes et produira quelque chose vers l'
<canvas> . Avant d'écrire le code de cette fonction, décrivons le style de ligne que nous utiliserons pour dessiner progressivement un carré, qui est un indicateur de chargement.
let gradient = context.createLinearGradient(0, 0, 32, 32); gradient.addColorStop(0, '#c7f0fe'); gradient.addColorStop(1, '#56d3c9'); context.strokeStyle = gradient; context.lineWidth = 8;
Dans la fonction
drawLoader nous
drawLoader des lignes en fonction du nombre de pour cent des étapes d'animation déjà terminées. Dans notre cas, 1 étape d'animation correspond à 1%. À savoir, pendant les 25% des premières étapes, une ligne représentant le côté supérieur du carré sera progressivement affichée. Les 25% suivants des étapes afficheront le côté droit du carré, et ainsi de suite - 25% du temps d'animation de chaque côté.
L'effet d'animation est obtenu en effaçant le contenu de l'
<canvas> et en affichant une ligne légèrement allongée par rapport à l'étape précédente. À chaque étape de l'animation, une fois la sortie de l'image vers l'
<canvas> terminée, l'image est rapidement convertie au format PNG et définie en tant que favicon de page.
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){
Faisons maintenant les calculs qui nous aideront à tracer les lignes nécessaires.
Voici quelles données sont utilisées pour sortir progressivement la partie supérieure du carré au cours des 25 premières étapes de l'animation:
- Le point de départ est le coin supérieur gauche de l'image (0,0).
- n est le numéro de l'étape d'animation en cours.
- x est la coordonnée
x du point final de la ligne à l'étape d'animation actuelle. - y est la coordonnée
y du point final, qui est 0.
Nous avons besoin qu'après avoir terminé les 25 étapes de l'animation, la valeur de
x soit 32 (c'est-à-dire la taille du favicon et de l'
<canvas> ). Par conséquent, nous rechercherons la valeur de
x à l'étape actuelle de l'animation
n selon la formule suivante:
x = (32/25) * n
Voici à quoi ressemble le code de dessin au trait dans lequel ce raisonnement est implémenté:
moveTo(0, 0); lineTo((32/25)*n, 0);
Les 25 étapes d'animation suivantes (dessin du côté droit du carré) sont effectuées de la même manière:
moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25));
Et voici le code complet de la fonction
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(); }
Résumé
C'est tout! Le code de création d'un indicateur de chargement rectangulaire, que nous développions ici, se trouve dans
ce référentiel. Et
voici le référentiel avec le code indicateur circulaire de téléchargement. En fait, en tant qu'indicateur similaire, vous pouvez utiliser n'importe quelle forme. Et si vous travaillez avec l'attribut
fill de l'
<canvas> , cela vous permettra d'obtenir des effets intéressants.
Chers lecteurs! Y a-t-il des projets dans votre région qui pourraient bénéficier de favicons animés?
