Como Colocar en el Cursor de tu Blog Destellos o Lluvia de Estrellas

by - sábado, marzo 27, 2021

Esta es una forma muy peculiar de adornar el cursor, y en cierto modo la página. Se trata de hacer que salgan destellos del cursor cuando éste se mueve y se van esparciendo y cayendo con forme se sigue moviendo.


Puedes ver un ejemplo en esta página. Cuando cargue la página mueve el cursor a donde quieras y verás cómo salen y caen los destellos del mouse; entre más muevas el cursor más destellos saldrán.

Para poner este efecto del cursor en tu blog, entra en Plantilla | Edición de HTML y antes de </head> pega lo siguiente:

<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=40;

/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web-design *
* http://www.mf2fm.com/rv *
* DON'T EDIT BELOW THIS BOX *
****************************/

var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var tiny=new Array();
var star=new Array();
var starv=new Array();
var starx=new Array();
var stary=new Array();
var tinyx=new Array();
var tinyy=new Array();
var tinyv=new Array();
window.onload=function() { if (document.getElementById) {
var i, rats, rlef, rdow;
for (var i=0; i<sparkles; i++) {
var rats=createDiv(3, 3);
rats.style.visibility="hidden";
document.body.appendChild(tiny[i]=rats);
starv[i]=0;
tinyv[i]=0;
var rats=createDiv(5, 5);
rats.style.backgroundColor="transparent";
rats.style.visibility="hidden";
var rlef=createDiv(1, 5);
var rdow=createDiv(5, 1);
rats.appendChild(rlef);
rats.appendChild(rdow);
rlef.style.top="2px";
rlef.style.left="0px";
rdow.style.top="0px";
rdow.style.left="2px";
document.body.appendChild(star[i]=rats);
}
set_width();
sparkle();
}}
function sparkle() {
var c;
if (x!=ox || y!=oy) {
ox=x;
oy=y;
for (c=0; c<sparkles; c++) if (!starv[c]) {
star[c].style.left=(starx[c]=x)+"px";
star[c].style.top=(stary[c]=y)+"px";
star[c].style.clip="rect(0px, 5px, 5px, 0px)";
star[c].style.visibility="visible";
starv[c]=50;
break;
}
}
for (c=0; c<sparkles; c++) {
if (starv[c]) update_star(c);
if (tinyv[c]) update_tiny(c);
}
setTimeout("sparkle()", 40);
}
function update_star(i) {
if (--starv[i]==25) star[i].style.clip="rect(1px, 4px, 4px, 1px)";
if (starv[i]) {
stary[i]+=1+Math.random()*3;
if (stary[i]<shigh+sdown) {
star[i].style.top=stary[i]+"px";
starx[i]+=(i%5-2)/5;
star[i].style.left=starx[i]+"px";
}
else {
star[i].style.visibility="hidden";
starv[i]=0;
return;
}
}
else {
tinyv[i]=50;
tiny[i].style.top=(tinyy[i]=stary[i])+"px";
tiny[i].style.left=(tinyx[i]=starx[i])+"px";
tiny[i].style.width="2px";
tiny[i].style.height="2px";
star[i].style.visibility="hidden";
tiny[i].style.visibility="visible"
}
}
function update_tiny(i) {
if (--tinyv[i]==25) {
tiny[i].style.width="1px";
tiny[i].style.height="1px";
}
if (tinyv[i]) {
tinyy[i]+=1+Math.random()*3;
if (tinyy[i]<shigh+sdown) {
tiny[i].style.top=tinyy[i]+"px";
tinyx[i]+=(i%5-2)/5;
tiny[i].style.left=tinyx[i]+"px";
}
else {
tiny[i].style.visibility="hidden";
tinyv[i]=0;
return;
}
}
else tiny[i].style.visibility="hidden";
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sdown;
x=(e)?e.pageX:event.x+sleft;
}
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
window.onresize=set_width;
function set_width() {
if (typeof(self.innerWidth)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height+"px";
div.style.width=width+"px";
div.style.overflow="hidden";
div.style.backgroundColor=colour;
return (div);
}
// ]]>
</script>

En var colour="#FFFFFF"; modifica el color de los destellos, en este caso son blancos pero puedes cambiarlos por el color que quieras, sólo te recomiendo que sea un color que contraste con el fondo del blog para que pueda apreciarse.

De esta forma puedes crear un ambiente "mágico" en tu blog.

A continuacion te proporcionamos el conversor de color gratuito le brinda los valores hexadecimales de sus colores RGB y viceversa (RGB a HEX). Úselo para convertir sus colores y preparar sus gráficos y páginas web HTML.

Para usar el convertidor, no use el símbolo '#'. ( Ej: 3333CC se convierte a rojo: 51 verde : 51 azul: 20

Palabras clave de color SVG

La siguiente tabla proporciona una lista de los colores X11 [X11COLORS] admitidos por los navegadores populares con la adición de variantes grises / grises de SVG 1.0. La lista resultante es exactamente la misma que la de los nombres de palabras clave de colores de SVG 1.0 . Las dos muestras de color de la izquierda ilustran la configuración del color de fondo de una celda de la tabla de dos maneras: la primera columna usa el valor de color con nombre y la segunda columna usa el valor de color numérico respectivo.

Nombre del color - RGB hexagonal

Alice azul   #f0f8ff

blanco antiguo   #faebd7

agua  #00ffff

aguamarina #7fffd4

azur #f0ffff

beige #f5f5dc

sopa de mariscos #ffe4c4

negro #000000

blanchedalmond #febcd

azul #0000ff

Violeta Azul #8a2be2

marrón #a52a2a

burlywood #deb887

cadete azul #5f9ea0

monasterio #7fff00

chocolate #d2691e

coral #ff7f50

azul aciano #6495ed

seda de maiz #fff8dc

carmesí #dc143c

cian #00ffff

azul oscuro #00008b

cian oscuro #008b8b

varilla de oro oscura #b8860b

gris oscuro #a9a9a9

verde oscuro #006400

gris oscuro #a9a9a9

caqui oscuro #bdb76b

darkmagenta #8b008b

verde oliva oscuro #556b2f

naranja oscuro #ff8c00

orquídea oscura #9932cc

rojo oscuro #8b0000

salmón oscuro #e9967a

verde oscuro #8fbc8f

azul oscuro #483d8b

gris oscuro #2f4f4f

darkslategrey #2f4f4f

turquesa oscuro #00ced1

Violeta oscuro #9400d3

Rosa profundo #ff1493

Depskyblue #00bfff

dimgray #696969

dimgrey #696969

dodgerblue #1e90ff

ladrillo refractario #b22222

floral blanco #fffaf0

bosque verde #228b22

fucsia #ff00ff

Gainsboro #dcdcdc

fantasma blanco #f8f8ff

oro #ffd700

vara de oro #daa520

gris #808080

verde #008000

verde amarillo #adff2f

gris #808080

gotas de miel #f0fff0

Rosa caliente #ff69b4

indio rojo #cd5c5c

índigo #4b0082

Marfil #fffff0

caqui #f0e68c

lavanda #e6e6fa

lavanda rubor #fff0f5

verde césped #7cfc00

gasa de limón #fffacd

azul claro #add8e6

coral claro #f08080

cian claro #e0ffff

dorado claro #fafad2

gris claro #d3d3d3

verde claro #90ee90

gris claro #d3d3d3

Rosa claro #ffb6c1

salmón ligero #ffa07a

verde claro #20b2aa

cielo azul claro #87cefa

luces grises #778899

luces grises #778899

azul claro # b0c4de

amarillo claro # ffffe0

Lima #00ff00

verde lima #32cd32

lino #faf0e6

magenta #ff00ff

granate #800000

mediumaquamarine #66cdaa

azul medio #0000cd

orquídea mediana #ba55d3

mediumpurple #9370db

medio verde #3cb371

medio pizarra azul #7b68ee

medio primaveral #00fa9a

medio turquesa #48d1cc

medio violeta #c71585

medianoche azul #191970

crema de menta #f5fffa

mistyrose #ffe4e1

mocasín #ffe4b5

navajowhite #ffdead

Armada #000080

Oldlace #fdf5e6

aceituna #808000

verde oliva #6b8e23

naranja # ffa500

rojo naranja # ff4500

orquídea #da70d6

varilla de oro pálido #eee8aa

Verde pálido #98fb98

paleturquesa #afeeee

pálido violeta #db7093

papayawhip #ffefd5

melocotón #ffdab9

Perú #cd853f

Rosa #ffc0cb

ciruela #dda0dd

azul pálido #b0e0e6

púrpura #800080

rojo #ff0000

marron rosado #bc8f8f

azul real #4169e1

silla de montar #8b4513

salmón #fa8072

marrón arenoso #f4a460

Mar verde #2e8b57

concha #fff5ee

tierra de siena #a0522d

plata #c0c0c0

cielo azul #87ceeb

pizarra azul #6a5acd

gris pizarra #708090

pizarra gris #708090

nieve #fffafa

primavera verde #00ff7f

azul acero #4682b4

broncearse #d2b48c

verde azulado #008080

cardo #d8bfd8

tomate #ff6347

turquesa #40e0d0

Violeta #ee82ee

trigo #f5deb3

blanco #ffffff

humo blanco #f5f5f5

amarillo #ffff00

amarillo verde # 9acd32

También te puede interesar

0 comments