Animation



//Pretty - http://www.btinternet.com/~kurt.grigg/javascript

/*
Paste this link betewwn the body tags of your page.

<script type="text/javascript" src="pretty.js"></script>

To edit, right click on the pretty.js file icon and choose edit.
*/

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Pretty</title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-script-type" content="text/javascript">
<meta http-equiv="content-style-type" content="text/css">

<style>
body{  
background-color : black;
}
</style>

</head>
<body>


<script type="text/javascript">
//Pretty - http://www.btinternet.com/~kurt.grigg/javascript

if  ((document.getElementById) && 
window.addEventListener || window.attachEvent){

(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 mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;    
 if (typeof e.pageY == "number"){
  y = e.pageY - msy;
  x = e.pageX;
 }
 else{
  y = e.clientY - msy;
  x = e.clientX;
 }
}

function colourStep(){
counter1 += step2;
if (counter1 >= numberOfDots+idx){
 counter1 = idx;
 counter2 += step2;
}
if (counter2 == colours.length){
 counter2 = 0;
}
scrolled();
document.getElementById("dvs"+counter1).style.backgroundColor = colours[counter2];
}

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>

</body>
</html>
Animation : Animation : GUI Components JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » GUI Components » Animation »

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
