XtGem.com

(function(){

//Configure here.

var colours = new Array("#ff0000","#00ff00"); //Add as many colours as you like!
var numberOfDots = 14;
var setTimeOutSpeed = 40;   //Timeout speed!
var followMouseSpeed = 0.03; //Must be less than 1 & greater than 0!
var twistAndSpinSpeed = 0.04;   
var colourChangeSpeed = 2;

//End config.
var idx = document.getElementsByTagName('div').length;
for (i = 0; i < numberOfDots; i++){
document.write('<div id="dvs'+(idx+i)+'" style="position:absolute;top:0px;left:0px;'
+'width:1px;height:1px;background-color:'+colours[0]+';font-size:1px"><\/div>');
}
var h,y,ref;
var d = document;
var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var pi = 3.1415/180;
var buff = 74;
var the_dots = [];
var ev = 360/numberOfDots;
var step2 = 1;
var pix = "px";
var y = 0;
var x = 0;
var ry = 0;
var rx = 0;
var dy = 0;
var dx = 0;
var sy = 0;
var sx = 0;
var scy = 0;
var scx = 0;
var counter1 = idx;
var counter2 = 0;
var counter3 = 0;
var step1 = 0;

if (followMouseSpeed <= 0 || followMouseSpeed >= 1){
 followMouseSpeed = 0.1;
}

if (domWw) ref = window;
else{ 
 if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  ref = d.documentElement;
 else{ 
  if (d.body && 
  typeof d.body.clientWidth == "number")
  ref = d.body;
 }
}

function winSize(){
var mozBar = ((domWw) && ref.innerWidth != d.documentElement.offsetWidth)?20:0;
h = (domWw)?ref.innerHeight:ref.clientHeight; 
w = (domWw)?ref.innerWidth - mozBar:ref.clientWidth;
}

function scrolled(){
if (domWw){
 scy = ref.pageYOffset;
 scx = ref.pageXOffset;
 }
else{
 scy = ref.scrollTop;
 scx = ref.scrollLeft;
 }
}

function DoItAll(){ 
counter3++;
step1 -= twistAndSpinSpeed;

dy = ry+=(y-ry)*followMouseSpeed;
dx = rx+=(x-rx)*followMouseSpeed;
if (ry >= h-buff){
 ry = h-buff;
}
if (ry <= buff){
 ry = buff;
}
if (rx >= w-buff){
 rx = w-buff;
}
if (rx <= buff){
 rx = buff;
}
if (counter3 > colourChangeSpeed){
 colourStep();
 counter3 = 0;
}

for (i = 0; i < numberOfDots; i++){
 the_dots[i].top = ry + 70 * Math.cos(step1 + i * ev * pi) * Math.sin(step1/2) + scy + pix;
 the_dots[i].left = rx + 70 * Math.sin(step1 + i * ev * pi) * Math.cos(1+step1/2) + scx + pix;
}

setTimeout(DoItAll,setTimeOutSpeed);
}

function init(){
for (i = 0; i < numberOfDots; i++){
 the_dots[i] = document.getElementById("dvs"+(idx+i)).style;
}
winSize();
DoItAll();
}

if (window.addEventListener){
 window.addEventListener("resize",winSize,false);
 window.addEventListener("load",init,false);
 document.addEventListener("mousemove",mouse,false);
}  
else if (window.attachEvent){
 window.attachEvent("onresize",winSize);
 window.attachEvent("onload",init);
 document.attachEvent("onmousemove",mouse);
}

})();
}//End.
</script>

(function(){

//Configure here...

var xCol = "#FF0000";
var yCol = "#FFA500";
var zCol = "#0000FF";
var n = 6;   //number of dots per trail.
var t = 40;  //setTimeout speed.
var s = 0.2; //effect speed.

//End.

var r,h,w;
var d = document;
var my = 10;
var mx = 10;
var stp = 0;
var evn = 360/3;
var vx = new Array();
var vy = new Array();
var vz = new Array();
var dy = new Array();
var dx = new Array();

var pix = "px";

var strictmod = ((document.compatMode) && 
document.compatMode.indexOf("CSS") != -1);

var domWw = (typeof window.innerWidth == "number");
var domSy = (typeof window.pageYOffset == "number");
var idx = d.getElementsByTagName('div').length;

for (i = 0; i < n; i++){
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;'
+'top:0px;left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>'

+'<div id="y'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+yCol+';font-size:'+dims+'px"><\/div>'

+'<div id="z'+(idx+i)+'" style="position:absolute;top:0px;'
+'left:0px;width:'+dims+'px;height:'+dims+'px;'
+'background-color:'+zCol+';font-size:'+dims+'px"><\/div>');
}

if (domWw) r = window;
else{ 
  if (d.documentElement && 
  typeof d.documentElement.clientWidth == "number" && 
  d.documentElement.clientWidth != 0)
  r = d.documentElement;
 else{ 
  if (d.body && 
  typeof d.body.clientWidth == "number")
  r = d.body;
 }
}

function scrl(yx){
var y,x;
if (domSy){
 y = r.pageYOffset;
 x = r.pageXOffset;
 }
else{
 y = r.scrollTop;
 x = r.scrollLeft;
 }
return (yx == 0)?y:x;
}

function assgn(){
for (j = 0; j < 3; j++){
 dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180) * Math.sin((stp+j*25)/2) + scrl(0) + pix;
 dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180) * Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
}
stp+=s;

for (i = 0; i < n; i++){
 if (i < n-1){
  vx[i].top = vx[i+1].top; vx[i].left = vx[i+1].left; 
  vy[i].top = vy[i+1].top; vy[i].left = vy[i+1].left;
  vz[i].top = vz[i+1].top; vz[i].left = vz[i+1].left;
 } 
 else{
  vx[i].top = dy[0]; vx[i].left = dx[0];
  vy[i].top = dy[1]; vy[i].left = dx[1];
  vz[i].top = dy[2]; vz[i].left = dx[2];
  }
 }
setTimeout(assgn,t);
}

function init(){
for (i = 0; i < n; i++){
 vx[i] = document.getElementById("x"+(idx+i)).style;
 vy[i] = document.getElementById("y"+(idx+i)).style;
 vz[i] = document.getElementById("z"+(idx+i)).style;
 }
winsize();
assgn();
}

if (window.addEventListener){
 window.addEventListener("resize",winsize,false);
 window.addEventListener("load",init,false);
 document.addEventListener("mousemove",mouse,false);
}  
else if (window.attachEvent){
 window.attachEvent("onload",init);
 document.attachEvent("onmousemove",mouse);
 window.attachEvent("onresize",winsize);
}

})();
}//End.
</script>