Efecto estrellas de colores en el cursor


Hoy les traigo un tutorial con un efecto muy bonito que pueden implementar en su blog o web. Se trata de uns estrellitas de colores que caen cuando se mueve el cursos. Pueden ver los resultados en mi blog de pruebas.


Bien, para implementar este efecto, seguimos los siguientes pasos :

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Con ayuda de CTRL+F buscamos </head> y justo antes de éste, pegaremos el siguiente script:


3.§ Damos click a guardar y listo!

Ver demo

21 opinaron:

Pachiarts

Gracias Jessica!!! me encanto el efecto..ya lo puse en mi blog

Responder
Jéssica YK

» Pachiarts:
Me alegra que te haya gustado. Quedó muy lindo en tu blog.

S@lu2

Responder
squirrel

He visto tu blog de pruebas y el efecto queda muy lindo.
También lo he probado en mi blog de pruebas y queda muy bien; ahora lo agrego a mi blog.

Responder
Deybi

Muy interesante! Saludos, Jéssica :)

Responder
Rebecca

hola,
yo quiero que las estrellas sean solo azules, cómo sería entonces el codigo de html para instalar antes de head?

Gracias por la ayuda^^

Responder
Jéssica YK

» squirrel:
Seguro quedará muy lindo en tu blog.

» Deybi:
Qué bueno que te haya gustado.

S@lu2

Responder
Jéssica YK

» Rebecca:

Para que las estrellas estén sólo de color azul, pega este código en lugar del código del post:

<script type="text/javascript">
// <![CDATA[
var colour="#3333FF";
var sparkles=50;
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"
}
}

Responder
Jéssica YK

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>

S@lu2

Responder
Daniela

thanks m nkantoO!!!

Responder
Jéssica YK

» Daniela:
Seguro quedará muy lindo en tu blog.

S@lu2

Responder
Rebecca

hola Jessica,
muchísimas gracias por el código, ya las coloqué en mi blog de pruebas y me funcionaron muy bien. ahora mismo las coloco en mi blog de Suenos de Amor.
cuando desees puedes ir a verlas.
un abrazo eternamente carinoso^^

Responder
Rebecca

hola Yessica,
en el blog de Suenos de Amor aparecen las estrellas azules solamente en la cabecera. Yo me cercioré de haber colocado el código html antes de head. Pero no se ve en todo el blog .
Qué piensas tu, qué he hecho mal?
Me puedes ayudar aquí?
Gracias Yessica.

un abrazo^^
http://deseosderebecca.blogspot.com

Responder
Rebecca

hola Jessica,
vengo a darte de nuevo las muchas gracias por el favor que me diste. las estrellas han quedado en mi blog muy preciosas. Te deseo un feliz fin de semana.
Un fuerte abrazo^^

Responder
Jéssica YK

» Rebecca:
Qué bueno que te haya sido útil mi ayuda.
Gracias por tu visita.

S@lu2

Responder
Beatriz Vielman .S.

wao me encantò el efecto muchas gracias ;) si gustas visitar mi blog es beavielman.blogspot.com para que veas que eh utilizado tu gran idea. gracias!

Responder
Jéssica YK

» Beatriz Vielman .S.:
Me alegra que te haya gustado el efecto. Gracias por vistar mi blog!

S@lu2

Responder
luigi caputi

Muy bueno lo tuyo.-saludos.-conocer cosmoglobal

Responder
Sarii Gabyy

Gracias lo usare el mi blog ;)

Responder
Crazy00_00

Hola, he probado el efecto y está muy bien, pero me gustaría que no se viesen simbolos + si no la imagen que yo quisiera o a poder ser estrellas de verdad, porque si miramos entre los caracteres que tienen las fuentes de letra existe la estrella bien dibujada, ¿como cambio lo que quiero que muestre?.

Responder
Camila fernandez

nose porque pero a mi no me queda:(

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio