Hello
    Add your small about me here! Hi my name is Leslie and I love pies. Pies are good and delicious and fun to eat. They're not cake.

    like it?
    tagboard
    Add your tagboard code here or something!
    stats
    Get a hit counter from http://hitcounterstats.com/ or google for more sites and add it here!


    Rainbow Sparkle Cursor Tutorial


    This is how the sparkle looks like:
    Okay, Let's start!

    1) Dashboard >> Design >> Add a Gadget >> HTML/JavaScript

    2) Copy the code below here and paste it in the content:

    <script type='text/javascript'>
    // <![CDATA[
    function initCursor() {
    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();
    }}
    var hex=new Array("00","14","28","3C","50","64","78","8C","A0","B4","C8","DC","F0")
    var r=1
    var g=1
    var b=1
    var seq=1
    var sparkles = 35;
    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();
    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");
    rainbow="#"+hex[r]+hex[g]+hex[b]
    if (seq==6){
    b--
    if (b==0)
    seq=1
    }
    if (seq==5){
    r++
    if (r==12)
    seq=6
    }
    if (seq==4){
    g--
    if (g==0)
    seq=5
    }
    if (seq==3){
    b++
    if (b==12)
    seq=4
    }
    if (seq==2){
    r--
    if (r==0)
    seq=3
    }
    if (seq==1){
    g++
    if (g==12)
    seq=2
    }
    div.style.position="absolute";
    div.style.height=height+"px";
    div.style.width=width+"px";
    div.style.overflow="hidden";
    div.style.zIndex="10";
    div.style.backgroundColor=rainbow;
    return (div);
    }
    window.onload=function()
    {
    initCursor()
    initImage()
    startTime()
    }
    function initImage() {
    imageId = 'menu'
    image = document.getElementById(imageId);
    setOpacity(image, 0);
    image.style.visibility = "visible";
    fadeIn(imageId,0);
    }
    function fadeIn(objId,opacity) {
    if (document.getElementById) {
    obj = document.getElementById(objId);
    if (opacity <= 100) {
    setOpacity(obj, opacity);
    opacity += 10;
    window.setTimeout("fadeIn('"+objId+"',"+opacity+")", 120);
    }
    }
    }
    function setOpacity(obj, opacity) {
    opacity = (opacity == 100)?99.999:opacity;
    // IE/Win
    obj.style.filter = "alpha(opacity:"+opacity+")";
    // Safari<1.2, Konqueror
    obj.style.KHTMLOpacity = opacity/100;
    // Older Mozilla and Firefox
    obj.style.MozOpacity = opacity/100;
    // Safari 1.2, newer Firefox and Mozilla, CSS3
    obj.style.opacity = opacity/100;
    }
    function changeNav(id) {
    document.getElementById('content').innerHTML=document.getElementById(id).innerHTML;
    document.getElementById('main').innerHTML=document.getElementById('home').innerHTML;
    document.getElementById('rabbit').style.top="275px"
    document.getElementById('penguin').style.top="532px"
    }
    function hidestatus(){
    window.status=""
    return true
    }
    // ]]>
    </script>
    <script type="text/javascript">
    if (window.jstiming) window.jstiming.load.tick('headEnd');
    </script>
    <div class='navbar section' id='navbar'><div class='widget navbar' id='navbar1'><script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
    if(window.addEventListener) {
    window.addEventListener("load",
    function(){ object[attribute] = val; }, false);
    } else {
    window.attachEvent('onload', function(){ object[attribute] = val; });
    }
    }
    function showRelatedContent(args) {
    var el = document.getElementById('related-iframe');
    if (el.parentNode.style.display != 'none') {
    el.parentNode.style.display = 'none';
    document.onclick = showRelatedContent.prevOnClick;
    return;
    }
    var match = /(?:^[?]|&)c=([0-9]+)(?:&|(?!.))/.exec(args);
    if (match !== null) {
    document.getElementById('related-loading').style.left = match[1] + 'px';
    el.style.left = Math.max(0, match[1] - parseInt(el.width) / 2) + 'px';
    }
    el.src = "http://www.blogger.com"
    + '/related-content.g?q='
    + window.location.href
    + '&id=' + "7792698363959436653";
    el.parentNode.style.display = 'block';
    showRelatedContent.prevOnClick = document.onclick;
    // Hide related-content dropdown when clicking anywhere but on it.
    document.onclick = function() {
    var el = document.getElementById('related-iframe');
    if (el.parentNode.style.display != 'none') {
    el.parentNode.style.display = 'none';
    }
    document.onclick = showRelatedContent.prevOnClick;
    };
    }
    </script>

    3) Save and Done :)

    "Rainbow Sparkle Cursor Tutorial" was Posted On: Saturday, November 10, 2012 @5:32 PM | 0 lovely comments


    « Older posts | Newer posts »


    Layout TeaCakeHouse. All rights reserved.
    Please view with Google Chrome in a 1280 x 800 SR. Resources: TFN.