|
Kreis
| Eine Animation, die jeder Mausbewegung folgt.
|
| Script: |
<script type="text/javascript">
if ((document.getElementById) &&
window.addEventListener || window.attachEvent){
(function(){
//Configure here.
var colours = new Array("#ff0000","#00ff00","#0000ff","#ffff00"); //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:3px;height:3px;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>
|
|
Home
Startseite
Tutorials
Die Möglichkeit diesen Artikel zu verlinken
: