Lo script che vi propongo oggi è molto interessante ed è stato reperito in rete.
La sua particolarità è che è compatibile con tutti i Browser e da un tocco di brio al cursore del Mause. Provare per credere!
L'installazione è molto semplice e non richiede conoscenze particolari. L'unica cosa che dovrete fare è inserire il codice mostrato in seguito tra i tag <head></head> del vostro blog in Layout/Modifica Html.
L'effetto ottenuto sarà simile a questo:
Codica JavaScript:
<script type="text/javascript">
// <![CDATA[
var colour="#f0f";
var sparkles=50;
/****************************
* 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 iny[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>
Se poi il codice vi risulta troppo lungo potrete inserire solamente questa semplice stringa che racchiuderà automaticamente il codice nella vostra pagina.
<script src="http://kamyxxii.altervista.org/lacameradeiblog/script/cursore/cursore.js" type="text/javascript" language="javascript"></script>
N.B.
L'unica differenza tra i due metodi di inserimento è la personalizzazione. Infatti se deciderete di usare il primo metodo avrete anche la possibilità di personalizzare il colore dell'effetto editando semplicemente la variabile
var colour="#f0f";
mentre per quanto riguarda il secondo questo non sarà possibile.
| Se l'articolo è stato interessante allora iscriviti al feed così rimarrai sempre aggiornato sui nuovi contenuti. |
10 commenti
ciao mi si blocca lo script
l'immagine a un certo punto si muove e poi si ferma e non si sposta più
come devo fare????
ciao ho provato questo script, purtroppo però funziona sul mio blog solo con la versione corta! :o(
volevo un colore un pò più consono a quelli del mio blog...pazienza, però l'effetto è....wow! :o)
Grazie kami
....anche a me si blokka lo script ...ad un certo punto
suggerimenti?
grande il tuo blog...complimenti
In che modo inserite lo script? Tramite l'intero codice o la singola stringa?
Qualche giorno fa ho prelevato da te il traduttore e per ringraziarti ti "giro" il premio Dardos. Se non sai di cosa si tratta dai un'occhiata al mio blog. Ciao, Martin
io ho inserito l'intero codice
Anch'io ho provato prima con lo script corto e tutto bene, poi ho provato quello lungo e ho modificato il colore. Dopo un iniziale godimento per la buona riuscita si è bloccato anche a me. Buaaaaa
Ho copiato lo script così com'era subito dopo head. Mi si blocca sia lasciando il colore così com'è sia modificandolo.
Aiutoooo!!!
bel blog...e molto carina l'idea della scia del cursore....a presto e tanti auguri
si puo' fare la stesa cosa solo che con una slitta?
Grazieeeeeeeeeee bellissimo!!!!! Lo cercavo da tempo questo effetto!!!Se passerai da me lo vedrai.Ciao Rorò.
Posta un commento