How to create a trail of stars on mouse to be included in the blog
It 's very nice effect you get with this little trick .. first
Go to Layout> Edit HTML and look for the line
\u0026lt;/ head>then , immediately above , paste the following code
\u0026lt;! - START MOUSE SCIA -> \u0026lt;script type='text/javascript'>
var color = & ; quot; " # FFBF18 ;
var sparkles = 50 ;
\u0026lt;/ script>
\u0026lt;script src = 'http://sites.google.com/site/ideepercomputeredinternet/script-1 / wake-mouse.js' style = 'text / javascript'>
\u0026lt;/ script>
\u0026lt;! - SCIA MOUSE END ->
here are the color table, you can change by changing the code in red
Or
\u0026lt;script type="text/javascript">
/ / \u0026lt;! [CDATA [
var color = "# f0f "
var sparkles = 50 ;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web design *
* * http://www.mf2fm.com/rv
* DO NOT EDIT BELOW THIS BOX *
****** **********************/
var x = ox = 400;
was y = oy = 300;
was swide = 800 ;
was shigh = 600;
was sleft = sdown = 0;
was tiny = new Array ();
was star = new Array ();
was starves = new Array ();
was starx = new Array ();
was stary = new Array ();
was tinyx = new Array ();
was tinyy = new Array ();
was tinyv = new Array ();
window.onload = function () {if (document.getElementById) {
was in, by, rlef, rdow;
for (var i = 0; i \u0026lt;sparkles; i + +) {
had been createDiv = (3, 3);
rats.style.visibility = "hidden";
document.body.appendChild (tiny [i] = deleted );
starves [i] = 0;
tinyv [i] = 0;
had been createDiv = (5, 5);
rats.style.backgroundColor = "transparent";
rats.style.visibility = "hidden";
was rlef createDiv = (1, 5);
was 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] = by);
}
set_width ();
sparkle ();
}}
function sparkle () {
was c;
if (x! = ox 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] \u0026lt;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 sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop 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 = color;
return (div);
} / /]]>
\u0026lt;/ script>
............................ .........
NB The numbers in red are variables that can change the color of the stars as you wish
Or
\u0026lt;script type="text/javascript">
/ / \u0026lt;! [CDATA [
var color = "# f0f "
var sparkles = 50 ;
/****************************
* Tinkerbell Magic Sparkle *
* (c) 2005 mf2fm web design *
* * http://www.mf2fm.com/rv
* DO NOT EDIT BELOW THIS BOX *
****** **********************/
var x = ox = 400;
was y = oy = 300;
was swide = 800 ;
was shigh = 600;
was sleft = sdown = 0;
was tiny = new Array ();
was star = new Array ();
was starves = new Array ();
was starx = new Array ();
was stary = new Array ();
was tinyx = new Array ();
was tinyy = new Array ();
was tinyv = new Array ();
window.onload = function () {if (document.getElementById) {
was in, by, rlef, rdow;
for (var i = 0; i \u0026lt;sparkles; i + +) {
had been createDiv = (3, 3);
rats.style.visibility = "hidden";
document.body.appendChild (tiny [i] = deleted );
starves [i] = 0;
tinyv [i] = 0;
had been createDiv = (5, 5);
rats.style.backgroundColor = "transparent";
rats.style.visibility = "hidden";
was rlef createDiv = (1, 5);
was 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] = by);
}
set_width ();
sparkle ();
}}
function sparkle () {
was c;
if (x! = ox 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] \u0026lt;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 sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop 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 = color;
return (div);
} / /]]>
\u0026lt;/ script>
............................ .........
NB The numbers in red are variables that can change the color of the stars as you wish
0 comments:
Post a Comment