Esto es lo primero que buscan cuando cambian entre pestañas del navegador. Acabamos de dar una de las posibles descripciones de lo que se llama un favicon. El espacio de la pantalla que ocupa la pestaña de una página web es un recurso mucho más valioso de lo que mucha gente piensa. Si trabaja bien con la etiqueta, además de seguir desempeñando el papel del identificador de página, puede convertirse en algo así como un "tablero de mensajes" que le dice qué está sucediendo exactamente en la página.
FaviconLos favicons son, de hecho, especialmente útiles cuando se trata de pestañas de navegador inactivas. Considera un ejemplo.
Suponga que carga fotos tomadas en unas recientes vacaciones de verano a un servicio en la nube utilizando su página web. Mientras se cargan las fotos, abre una nueva pestaña del navegador para encontrar detalles sobre los lugares donde estuvo y usarlas en los subtítulos de las fotos. Mientras busca todo esto, uno se aferra al otro, y ahora está mirando a Casey Neistat en la séptima pestaña del navegador. Pero no puede continuar con seguridad su maratón de YouTube. Mire periódicamente la página del servicio en la nube para averiguar si sus fotos ya están cargadas.
¡Este es el caso cuando puedes ser creativo! ¿Qué pasaría si pudiéramos cambiar dinámicamente los píxeles que componen el favicon y mostrar información sobre el proceso de carga de archivos en el acceso directo de la página? De hecho, esto es lo que haremos aquí.
En los navegadores que admiten esto, puede mostrar algunas animaciones como un favicon usando JavaScript, el elemento HTML
<canvas> y reglas de geometría antiguas.
Así es como se ve la animación de carga en la pestaña del navegador.
Inmediatamente manos a la obra y comience con lo más simple. A saber, agregue los elementos
<link> y
<canvas> al código HTML de la página:
<head> <link rel="icon" type="image/png" href="" width=32px> </head> <body> <canvas width=32 height=32></canvas> </body>
Cuando use esta técnica en la práctica, probablemente quiera ocultar el
<canvas> . Una forma de hacerlo es usar el atributo HTML
hidden :
<canvas hidden width=32 height=32></canvas>
Voy a dejar el
<canvas> visible para que podamos ver cómo la animación se muestra simultáneamente tanto en el favicon como en el
<canvas> . Ambos tienen el tamaño de un favicon estándar: 32x32 píxeles.
Para fines de demostración, agregaremos un botón a la página, haciendo clic en el cual comienza la animación. Agregue lo siguiente al código HTML de la página:
<button>Load</button>
Ahora entremos al código JavaScript. Verifiquemos primero el soporte de
canvas :
onload = ()=> { canvas = document.querySelector('canvas'), context = canvas.getContext('2d'); if (!!context) { } };
A continuación, conecte el controlador de eventos de clic de botón, que se usará para iniciar la animación en el
<canvas> :
button = document.querySelector('button'); button.addEventListener('click', function() { n = 0, loadingInterval = setInterval(drawLoader, 60); });
La entidad
drawLoader que pasamos a
setInterval es una función que se llamará a intervalos de 60 milisegundos y enviará algo al
<canvas> . Antes de escribir el código para esta función, describamos el estilo de línea que usaremos para dibujar gradualmente un cuadrado, que es un indicador de carga.
let gradient = context.createLinearGradient(0, 0, 32, 32); gradient.addColorStop(0, '#c7f0fe'); gradient.addColorStop(1, '#56d3c9'); context.strokeStyle = gradient; context.lineWidth = 8;
En la función
drawLoader dibujaremos líneas según el porcentaje de los pasos de animación que ya se hayan completado. En nuestro caso, 1 paso de animación corresponde al 1%. Es decir, durante el primer 25% de los pasos, se mostrará gradualmente una línea que representa el lado superior del cuadrado. El siguiente 25% de los pasos mostrará el lado derecho del cuadrado, y así sucesivamente: el 25% del tiempo de animación en cada lado.
El efecto de animación se logra borrando el contenido del
<canvas> y generando una línea ligeramente alargada en comparación con el paso anterior. En cada paso de la animación, una vez finalizada la salida de la imagen al
<canvas> , la imagen se convierte rápidamente al formato PNG y se configura como el favicon de la página.
function drawLoader() { with(context) { clearRect(0, 0, 32, 32); beginPath(); if (n<=25){
Ahora hagamos los cálculos que nos ayudarán a dibujar las líneas necesarias.
Estos son los datos que se utilizan para generar gradualmente el lado superior del cuadrado durante los primeros 25 pasos de la animación:
- El punto de partida es la esquina superior izquierda de la imagen (0,0).
- n es el número del paso de animación actual.
- x es la coordenada
x del punto final de la línea en el paso de animación actual. - y es la coordenada
y del punto final, que es 0.
Necesitamos que después de completar los 25 pasos de animación, el valor de
x sea 32 (es decir, el tamaño del favicon y el
<canvas> ). Por lo tanto, buscaremos el valor de
x en el paso de animación actual
n acuerdo con la siguiente fórmula:
x = (32/25) * n
Así es como se ve el código de dibujo lineal en el que se implementa este razonamiento:
moveTo(0, 0); lineTo((32/25)*n, 0);
Los siguientes 25 pasos de animación (dibujar el lado derecho del cuadrado) se realizan de manera similar:
moveTo(0, 0); lineTo(32, 0); moveTo(32, 0); lineTo(32, (32/25)*(n-25));
Y aquí está el código completo de la función
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(); }
Resumen
Eso es todo! El código para crear un indicador de carga rectangular, que estábamos desarrollando aquí, se puede encontrar en
este repositorio. Y
aquí está el repositorio con el código del indicador circular de descarga. De hecho, usted, como indicador similar, puede usar cualquier forma. Y si trabaja con el atributo de
fill del
<canvas> , esto le permitirá lograr efectos interesantes.
Estimados lectores! ¿Hay proyectos en su área que se beneficiarían de favicons animados?
