1/5/13

[Tutorial]Poner destellos a tu cursor II


hOLA que tal?? bien no bueno yo aqui aqui en el blog  y bueno parece que os gusto la idea de Graphic Style y bien la siguiente entrada intentare que sea de esa nueva sección mmmm tengo que pensarme mejor el horario y hacer unas cosillas al blog  y editar algunos recursos mm tengo muchas cosas planeadas  y bueno para que no os aburrais os traigo un tuto pero mejorado a principios de los tiempos cuando mi blog empezaba publique un tuto de poner destellos blancos al cursor (pero solo blancos!?) en ese momento no sabia nada de Diseño de HTLM y bien os lo traigo mejorado esta vez es el color que tu elijas 
Antes de nada queria actualizar el post diciendo que ya podeis pedirme las entradas en la opcion del navegador
y te llevara a un formulario que tenéis que rellenar :3
Ahora si el tuto


  • Ir a Diseño
  • Añadir Gadget Javascrip/HTLM 
  • y pegar en la cajita que te viene este codigo 
<script type='text/javascript'>
// <![CDATA[
var colour="#FCAEC5";
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>
EDITO<3
Azul:Es el color de los destellos del cursor (si pincháis sobre el el el color os llevara a una pagina de codigos de color)

Espero que os haya gustado el tuto un besazo hasta la próxima entrada y recordar si tenéis alguna petición de alguna entrada en especial solo decírmelo  

9 comentarios:

  1. Gracias por la tutorial.
    de seguro lo pruebo:)

    ResponderEliminar
    Respuestas
    1. de nada es un placer ayudarte en lo que necesites

      Eliminar
  2. Gracias por el tuto Kumy *O* Kumy donde puedo bajar el photoshop?


    Muchos Besos y Cuidate!!

    Pd: Hoy son las entrevistas, me mandas las preguntas por E-mail (frzamo@gmail.com)

    Cuidate amiga :3

    ResponderEliminar
    Respuestas
    1. OKEI si ahora iba a hacer una entrada a peticion de descarga del photoshop

      Eliminar
  3. ahhh que cool^^(yo diciendo cool?)ahh creo que te hice una peticion!!
    gracias y muchos besos*O*

    ResponderEliminar
    Respuestas
    1. si ya la leí e hice la entrada n-n soy rapida jajajaj

      Eliminar
  4. Como Hiciste La Florcita De Tu Firma? Esa De Color Rosa Claro & Lila, Me Gustan Los Colores & Los Efectos *.* Haz Un Tuto! (?) XD

    ResponderEliminar
    Respuestas
    1. oh yuki es muy fácil haré un tuto (estas en lista de espera XD)de repente estoy desbordada con los tutos x3 mañana `por la tarde creo haré tu tuto ok

      Eliminar
  5. Gran tuto pero me gustaria ver como queda XD

    ResponderEliminar

Holaa!! muy buenos días-tardes-noches espero que te haya gustado la entrada & si me dejas una huellita estaría muy agradecida.
Si tienes alguna duda no te olvides de mandarme un mail a mi correo o bien hacerlo por medio de la sección de dudas
candelaaisiska@gmai.com