Entonces, hay un truco de Ben Foxall que muestra cómo puedes escapar de la ventana del navegador y dibujar fuera de la página. Tuve que probarlo yo mismo. Así que aquí viene: el cursor del mouse indicador animado de "progreso".
¿Esperar lo?
Existe la posibilidad de que su página web use un cursor personalizado al proporcionar una URL a una imagen. Pero los GIF animados, etc. no están permitidos. Parece que los proveedores de navegadores no quieren que nos volvamos locos, al estilo de los 90. Y con razón eso.
Pero resulta que puede usar canvas, en lugar de URI, para una imagen estática. Y puedes animar la cosa en el lienzo.
Cómo
Agarré un ejemplo de animación de MDN. Es un reloj. Pero puedes usar cualquier cosa, p. algo relacionado con lo que hace tu aplicación.
Solo hice dos cambios al ejemplo.
Primero, el lienzo no es estático, sino creado en la memoria:
var canvas = document.createElement ('canvas');
canvas.width = canvas.height = 128;
var ctx = canvas.getContext ('2d');
128 parece ser el límite de qué tan grande puede ser el cursor.
El segundo cambio es convertir la imagen del lienzo en URI de datos y hacer que el cursor sea ese URI.
document.documentElement.style.cursor =
'url (' + canvas.toDataURL () + ') 64 64, auto';
Las coordenadas 64 64 son para que la imagen se pueda centrar.
Y listo: un cursor de mouse animado personalizado que incluso se extiende más allá de la ventana del navegador.
Y la demo una vez más
aquí
Dilema moral
¿Los navegadores deberían rechazar esto? Tal vez, probablemente. ¿Debes abusar de esto y festejar como si fuera 1995? Tú mejor no.
0 Comentarios