Type in key words and search my blog here:

Loading

Tuesday, June 16, 2009

Fairy Dust Mouse Trail

Fairy Dust Blogger Instructions

Link: mf2fm Look for MOUSE EFFECTS to the left.

Resource: Funky’s Blog

THANK YOU SO MUCH FUNKY! YOU TOTALLY ROCK!

Request by: Doris at Scraps Dimensions

Adding a Fairy Dust mouse trail to your blog.

Step 1 – Decide on color of your mouse trail.

Click here to get the color of your choice COLOR CHART save that color code. The color in the sample given is SILVER. You can see the Fairy Dust Mouse Trail in action on my test blog HERE.

Step 2 – Backup your blog template.

You can find directions to do that here.

Step 3 – Change your HTML code.

Go to CUSTOMIZE/LAYOUT/EDIT HTML and look in the top of your HTML code for the word <head>

clip_image002

You will place this code directly behind the word <head>

<script type='text/javascript'>
// <![CDATA[
var colour="#D9D9D9";
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 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>

Step 4 – PREVIEW

Give your blog time to load and you should be able to preview the mouse trail. You may want to add more “sparkles” by increasing the number in the top of the code.

Step 5 – SAVE

If you like what you see, then save your HTML template.

Now you have a fairy dust mouse trail.

Click HERE for the Word Document Instructions.

Here’s to happy scrapping, and

Hugs from the heart,

Jeanette

9 comments:

  1. Scraps Dimensions

    Thank you so much for this tutorial...I just got back from bein away for a few weeks...I am going to change my blog layout and can't wait to start this...you are an angel. Hugs and kisses.

    ReplyDelete
  2. I'm finally getting around to some of the fun things I've wanted to add, so THANKS for all your amazing work. My blog would not be anywhere near what it is today without you. I'm still waiting on my CT to make the scrolling list for them, but you can check out some of the other things I'm doing! I hope you are having a relaxing summer.

    ReplyDelete
  3. Awesome! Worked like a charm! I posted about it on my blog: http://bubblykori.blogspot.com/2009/08/fairy-dust-mouse-sparkles.html

    By the way, if you like any of my designs, let me know and I'll get you a free kit! :) My terms allow web usage.

    Thanks for the great blog tips!

    ReplyDelete
  4. Wow this is awesome! Thanks so much for the tut! I added it and it matched my header that a friend made for me :) Here is my blog Lady Yuna Creations

    ReplyDelete
  5. It worked ..it worked,,it worked!!! Thank you Thank you Thank you!!!
    Love your tuts...keep them coming!!!
    Huggs
    Tanya

    ReplyDelete
  6. Thanks for this tutorial! It worked for me too! However, it works best when you mouver the top of the page and the sides but not on the middle part of the page. I wonder why. Hopw you can help me out on this. You can also take a look at my blog http://theseekergirl.blogspot.com

    ReplyDelete
  7. Hey Jeanette, I love this, but again your page won't let me copy the code..

    ReplyDelete
  8. Hey Cat, click on the Word Document instruction at the bottom of the post!

    ReplyDelete
  9. Hi Jeanette love your blog !! Where would I find the 'snow effect' that you have on your blog ? Its really cute !
    My blog is http://wendyb5724.blogspot.ca/

    ReplyDelete

Thanks for taking time to leave a comment. I would love for you to include your blog address

Just copy and paste the following in your comments and add your blog address and blog name, and you will easily post it in your comments. Don't leave any spaces!

<a href="YOUR BLOG ADDRESS HERE/">YOUR BLOG NAME HERE</a>

-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-.•:*¨¨*:•.-:¦:-

Here's to more happy scrapping, and
Hugs from the heart,
Jeanette

ONE SIZE TEMPLATE

ONE SIZE TEMPLATE
Blog Background Template