Letres amb el cursor


Amb aquest script podeu aconseguir l'efecte amb el cursor que veis en aquesta pàgina

<STYLE>

.spanstyle {

position:absolute;

visibility:visible;

top:-50px;

font-size:8pt;

font-family:Verdana;

font-weight:light;

color:000080;

}

</STYLE>

<script language="JavaScript">
<!--
function MM_displayStatusMsg(msgStr) { //v1.0

status=msgStr;

document.MM_returnValue = true;

}

// ++++++++++++

var x,y

var step=10

var flag=0

var message="Aqui va el text "

message=message.split("")

var xpos=new Array()

for (i=0;i<=message.length-1;i++) {

xpos[i]=-50

}

var ypos=new Array()

for (i=0;i<=message.length-1;i++) {

ypos[i]=-50

}

function handlerMM(e){

x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX

y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY

flag=1

}

function makesnake() {

if (flag==1 && document.all) {

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("span"+(i)+".style")

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

}

else if (flag==1 && document.layers) {

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

}

var timer=setTimeout("makesnake()",30)

}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>

<BODY bgcolor="#FFCC99" onLoad="makesnake();MM_preloadImages('tscroll.class','logo.jpg')"style="width:100%;overflow-x:hidden;overflow-y:scroll">

<script language="JavaScript">

<!-- Beginning of JavaScript -


for (i=0;i<=message.length-1;i++) {
document.write("<span id='span"+i+"' class='spanstyle'>")
document.write(message[i])
document.write("</span>")
}

if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}

document.onmousemove = handlerMM;

// - End of JavaScript - -->
</script>



   Aquest Script consta de quatre parts: L'style (en vermell) que heu de copiar entre <head> i </head>, en el qual podeu canviar l'aspecte de les lletres que segueixen al cursor, (tamany, color, gruixa, etc...).

   Després heu de copiar el primer script (en blau), també dins <head>, aqui la part principal que podeu canviar l'he posada en verd: el valor de la variable "step", que canvia la separació entre les lletres i el text en si (var message="Aqui va el text"), que és el text que acompanya al cursor.

   Seguidament heu de deixar el tag <body> tal com apareix aqui (en negre).

   I finalment copiau el darrer script (en gris) entre <body...> i </body>.


Tornar