sábado 5 de diciembre de 2009

Cursor con destellos

|

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 el cursor.
Puedes ver un ejemplo en esta página de Wallpapers para el móvil gratis. 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 Diseño > Edición de HTML y antes de </head> pega lo siguiente:
<script type='text/javascript'>
// <![CDATA[
var colour="#FFFFFF";
var sparkles=40;

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 el blog.
Tantos códigos me han dado mucha sed ¿qué tal una cerveza?

42 comentarios:

RIDDLE dijo...

siempre creì que era nieve :C

jajaja
yo lo puse en mi blog pensando que era un buen motivo para navidad, por aquello de 'la nieve'...

jajaja

saludos

Alex dijo...

Whoa me gusto en primera la web de los fondos, de hecho los descargue pero en mi telefono salen pequeños es Iphone
pero igual se ve genial es efecto, estare colocandolo en proximos dias por que apenas y me da tiempo para postear en un blog ahora ok
nos vemos

Walter Conejo Carballo dijo...

HOLA POTRO, SOY WALTER DE COSTA RICA, ESPERO QUE TODOS TUS ASUNTOS MARCHEN BIEN. SOLO QUIERO AGRADECERTE POR ESTE GRANDIOSO BLOG. DESEO CONTARTE QUE ESTOY IMPARTIENDO UNA PEQUE;A CAPACITACION SOBRE PAGINAS WEB EN LA INSTITUCION EDUCATIVA DONDE LABORO (http://cneefcg.blogspot.com/)Y UTILIZAMOS A CIUDAD BLOGGER COMO REFERENCIA PUES A MI CRITERIO ES EL MEJOR DE TODAS LAS FUENTES DE TRUCOS BLOGGER. YA TE CONOCEN MAS PERSONAS. MUCHAS GRACIAS.

fabian dijo...

Te quedo super en la de fondos 240 felicitaciones por esos buenos trucos!

El Potro dijo...

RIDDLE, sí tiene el aspecto de nieve y combina perfecto para la época, aunque igual se puede usar todo el tiempo. Saludos.

Alex, son fondos de pantalla para teléfonos de 240 x 320px. Es una lástima que hayas cerrado temporalmente el otro blog pero entiendo que cuando no hay tiempo es difícil postear. Un abrazo!

Walter, de verdad muchas gracias por tus comentarios. Me siento honrado saber que este humilde blog ha sido de ayuda para otras personas. Un saludo!

fabian, gracias por tus comentarios, qué bueno que te ha gustado =) Saludos!

jonathan pucheta dijo...

potro x favor podes subir un tutorial de como instalar el reproductor flow player al blog...

El Potro dijo...

Hola jonathan,

Desconozco ese reproductor, lo siento =S

Alex dijo...

Pues si pero a veces es mucho estar con tantos blogs al que cerre temporalmente es popular pero ya no puedo más lo regalare o haber si alguien se anima a ayudar pues me vere menos precionado
nos vemos
y gran post para esta navidad

cargohe dijo...

hola potro gracias pero no una manera de poner este script de manera abreviado, osea crear un .txt y subirlo a una web de alojamiento de archivos y ponerlo en la plantilla por medio de al url, para luego cuando quiera quitarlo no enredarme con tanto código que tiene.
Salu2

El Potro dijo...

Ummm no creo, el script tiene muchas funciones () que llamar para su funcionamiento.
Pero no le veo gran problema, cuando lo quieras quitar regresa a este post para que veas cuál es el código que debes quitar.

Saludos.

cargohe dijo...

listo ya lo puse, cuando lo valla a quitar regreso por este post, lo mando a marcadores ;).
Salu2.

Jared dijo...

El potro, existe alguna manera de reemplazar las crucesitas que salen del cursor x otro caracter?

elizaquiereamor dijo...

awwww k lindo cursor con estrellitas me encanto!!!
creiste k ya no te leia ehhhhh?????
ahora ya sabes k si!!!
te mando muuuuchos besos!!!
xoxoxoxo

ARMANDOKUN dijo...

Seguro esta muy divertido tener el curso con destellos..

El Potro dijo...

cargohe, vale, suerte!

jared, lamentablemente sólo se puede configurar el color de las estrellas, nada más. Saludos.

elizaquiereamor, yo sé que me lees y que me quieres casi tanto como yo a ti =)

ARMANDOKUN, siii, como que saca el niño que todos llevamos dentro ;)

@rielCastellanos dijo...

Hola :El Potro" vuelvo a ti esperando que puedas ayudarme, mira, voy a cambiar el estilo de comentarios en el Blog y voy a poner el de DISQUS, y kisiera saber como cambiar el contador de comentarios de blogger y poner el de DISQUS. Este es el contador de DISCUS (http://disqus.com/)(http://ivpaste.com/view.php?id=39967) pero no se que kitar o que cambiar en mi plantilla de Blogger, ya hice todo lo q esta a mi alcance pero no logre nada, espero que me ayudes.

Seria bueno que tambien publicaras una entrada acerca de ese servicio, esta buenisimo.

Mi Blog D Pruebas es: http://webprosperity-negocio.blogspot.com/2009/11/buscador-google.html#disqus_thread

Otra duda, como hago para que cuando se de click al enlace COMENTARIOS (2) se agregue a la URL #disqus_thread y no el default de blogger #comments

Mira, en este blog hay un ejemplo (http://naruedyoh.blogspot.com/2009/11/no-hay-nativos-digitales.html#disqus_thread)

carla dijo...

Me encanta tú blog!. Puedes decirme como se cambia el color de las estrellas?. Gracias mil.

DE INTERES dijo...

Hola, tienes un premio esperando por tí en mi Blog, por favor pasa por el, FELICITACIONES!!! Un abrazo

El Potro dijo...

@rielCastellanos, nunca he probado Discus, así que no sabría cómo ayudarte =(

carla, al inicio del código hay una parte marcada en color rojo, debes cambiar donde dice #FFFFFF por el código del color que quieres.

DE INTERES, wow, muchas gracias, ahora mismo me doy una vuelta =) Saludos!

Ezequiel dijo...

hola genio (A) jaja yo ya no te digo mas potro :P

disculpa que te haga la pregunta aca, es que no sabia donde hacerla, tengo una duda, yo a veces respondo los comentarios que me hacen al igual que vos, ahora a veces me salteo una palabra o la escribo dos veces por distraccion, entonces lo que quiero saber es como se puede hacer (en caso de que se pueda) para borrar los comentarios que yo hago o sea borrar un comentario especifico del administrador del blog o sea yo :P

muchas graciass, un abrazo grandee

PD: sos profesor? porque tenes o eso pareciera una excelente manera de expresarte y explicar las cosas (o sea lo que me falta a mi :P jajja)

un abrazoo :)

El Potro dijo...

Jajaja, me parece que tú te explicas mejor que yo (créeme).

Para borrar un comentario, ya sea de un usuario o tuyo, sólo entra en la entrada que tiene el comentario y abajo del comentario que quieres eliminar verás un ícono de un basurero, haz click ahí para eliminar el comentario.

Un abrazo y gracias por tus comentarios =)

Ezequiel dijo...

ese icono solo me aparece para los comentarios de los demas, pero en los mios no aparece :S

mira: http://sites.google.com/site/probar123456/probar1234567/asd.jpg?attredirects=0

El Potro dijo...

Pon en tu plantilla esto:

.comment-timestamp {
display: block;
float: left;
}

Con eso debe aparecer.
Saludos.

Ezequiel dijo...

jojo, yo siempre empiezo por tus pistas (A) y termino llegando a la solucion :), no era eso :P, me faltaba el siguiente codigo dentro de este codigo


if cond='data:comment.author == data:post.author'>
...
....
include data='comment' name='commentDeleteIcon'/>
...
...

muchas gracias como siempre :)

un abrazo grandee

El Potro dijo...

Jaja, creo que tendré que cambiar el nombre del blog por Las Pistas de Blue =P
Qué bueno que ya diste con la solución.

Un abrazo!

@rielCastellanos dijo...

Hola, lo logre, ya quedo perfectamente instalado, si tienes un chance, me gustaria que probaras el nuevo sistema y me dieras tu opinion ya que hace dias queria algo distinto a este formulario de Blogger, dime q tal su desempeño y si no te da problemas.

Enlace --->>> http://blogunah.blogspot.com/

Gracias amigo

cyberbloggero dijo...

Muy bueno bro! lo acabo de ver en el blog de Carla y queda fantástico! se lo voy a recomendar a una amiga que tiene un blog personal, que seguro lo va a agregar!


Un abrazo!!!

El Potro dijo...

No lo había visto pero sí le quedó muy bien. Ojalá a tu amiga le guste.

Un abrazo!

Meri dijo...

Queda fenomenal Potro. Eres un fenómeno, de verdad
Siempre mil gracias

Ahora una preguntilla, se podía cambiar la cruz por otro símbolo como estrella, corazón etc?

Aquí lo puse
http://elclubdemisamores-meri.blogspot.com/

El Potro dijo...

Hola Meri,

Lamentablemente sólo se puede cambiar el color de las estrellitas y nada más =(

Te ha quedado muy bien en tu blog.
Muchas gracias por tus comentarios.

Saludos!

Meri dijo...

Gracias por tu respuesta.
Sería un puntazo poder cambiar el simbolito
Saludos

Mr.Juglar dijo...

Hola, la verdad no sé si este comentario lo llegues a leer, pero quisiera saber si existe alguna manera de cambiar el caracter que cae desde el cursor, en este código lo que cae son "+", y no sé, por ejemplo se podrá cambiar por un "*" ???, he tratado de ver el código ya varias veces y ver que cambiar, pero no tengo ni la menor idea, no hay nada en referencia al caracter utilizado

de antemano muchas gracias

Saludos!

El Potro dijo...

Hola Mr.Juglar,

Lamentablemente no se puede modificar, lo único configurable es el color, nada más.

Saludos.

Lucy Veras dijo...

Holaaa
muy lindo
pero tengo un problemita y es k lo pongo en mi blog de prueba pero en el cual lo quiero poner lo funciona y ambos tienen la misma plantilla

que puedo hacer?

El Potro dijo...

Hola Lucy Veras,

Debe ser por algún otro script que tienes, muy posiblemente el del título en movimiento.
Generalmente estos tipos de scripts no son compatibles con otros.

Saludos.

Lucy Veras dijo...

Hey me acaba de pasar algo medio raro
y es k cuando estoy en editar diseño el cursor tiene los destellos pero no en el blog

El Potro dijo...

Eso es porque cuando estás en Elementos de la página los demás scripts no se ejecutan por lo que no interfieren con su funcionamiento, pero cuando estás ya en el blog los demás scripts arrancan y obstruyen a este :(

Chibi dijo...

como le cambio el color a los destellos, como se q escribir para cada color, x ejemplo, rosa?

El Potro dijo...

Hola Chibi,

Para el color rosa usa este código #FA58AC
Aquí hay una tabla con más códigos de colores:
http://html-color-codes.info/codigos-de-colores-hexadecimales/

Publicar un comentario en la entrada

Gracias por tus comentarios. Si tienes una consulta sobre tu blog deja la dirección del mismo.

 

Ciudad Blogger. Copyright 2008 All Rights Reserved Revolution Two Church theme by Brian Gardner Converted into Blogger Template by Bloganol dot com

Ir arriba Ir abajo