Der hier benutzte Code
<script>
var animate = (function(w){
var dots = [],DOT_SIZE =1.3;
var Dot = function(x,y,vx,vy,tox,toy,color){
this.x=x;
this.y=y;
this.vx=vx;
this.vy=vy;
this.visible = false;
this.nextox = tox;
this.nextoy = toy;
this.color = color;
this.globleDown = false;
this.gravity = Math.random()*3+6.8;
this.setEnd(tox , toy);
}
Dot.prototype = {
paint:function(){
ctx.fillStyle = this.color;
ctx.fillRect(this.x-DOT_SIZE/2 , this.y-DOT_SIZE/2 , DOT_SIZE , DOT_SIZE)
},
setEnd:function(tox , toy){
this.tox = tox;
this.toy = toy;
},
update:function(time){
this.x += this.vx*time;
this.y += this.vy*time;
if(!this.globleDown){
var yc = this.toy - this.y;
var xc = this.tox - this.x;
this.jl = Math.sqrt(xc*xc+yc*yc);
var za = 20;
var ax = za*(xc/this.jl);
var ay = za*(yc/this.jl);
this.vx = (this.vx + ax*time)*0.95;
this.vy = (this.vy + ay*time)*0.95;
}else {
this.vy += this.gravity * time;
if(this.y>canvas.height){
dots.splice(dots.indexOf(this) , 1 , null);
}
}
},
loop:function(time){
this.update(time);
this.paint();
}
}
var animate = function(){
this.state = "before"
};
var ap = animate.prototype;
ap.init = function(){
this.osCanvas = document.createElement("canvas");
var osCtx = this.osCanvas.getContext("2d");
this.osCanvas.width = 1000;
this.osCanvas.height = 200;
osCtx.textAlign = "center";
osCtx.textBaseline = "middle";
osCtx.font="100px sans-serif";
osCtx.fillStyle = "#0000ff";
osCtx.fillText("WELCOME TO" , this.osCanvas.width/2 , this.osCanvas.height/2-40);
osCtx.fillText("soforthilfe-forum.de" , this.osCanvas.width/2 , this.osCanvas.height/2+50);
var bigImageData = osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height);
dots = [];
for(var x=0;x128){
var dot = new Dot(
canvas.width/2-1+2*Math.random(),
canvas.height/2-1+2*Math.random(),
0,
0,
x+(canvas.width/2-this.osCanvas.width/2),
y+(canvas.height/2-this.osCanvas.height/2),
"rgba("+bigImageData.data[i]+","+bigImageData.data[i+1]+","+bigImageData.data[i+2]+",1)"
);
dot.setEnd(canvas.width/2,canvas.height/2);
dots.push(dot);
}
}
}
};
function getLogoData(){
var osCtx = this.osCanvas.getContext("2d");
osCtx.clearRect(0,0,this.osCanvas.width,this.osCanvas.height);
this.osCanvas.width = 500;
this.osCanvas.height = 100;
osCtx.fillStyle="#0000ff";
osCtx.fillRect(20,20,60,60);
osCtx.textAlign = "center";
osCtx.textBaseline = "middle";
osCtx.font="65px sans-serif";
osCtx.fillStyle="#E06D2F";
osCtx.fillText("Basti" , 326 , this.osCanvas.height/2);
osCtx.font="40px sans-serif";
osCtx.fillStyle="#405159";
osCtx.fillText("By" , 180 , this.osCanvas.height/2);
osCtx.fillText("1012" , 430 , this.osCanvas.height/2);
return osCtx.getImageData(0,0,this.osCanvas.width,this.osCanvas.height);
}
ap.changeState = function(){
var bigImageData = getLogoData.call(this);
var index=0;
var d;
dots.sort(function(){
return Math.random()-Math.random();
});
for(var x=0;x128){
d.setEnd(x+(canvas.width/2-300) , y+50);
d.color = "rgba("+bigImageData.data[i]+","+bigImageData.data[i+1]+","+bigImageData.data[i+2]+",1)";
index++
}
}
}
while(index < dots.length){
if(!(d = dots[index++])) continue;
d.globleDown = true;
d.vx = 0;
}
}
ap.update = function(time){
var i,d;
time /= 100;
var completeNum = 0;
for(i=0;i=5*dots.length/6 ){
switch (this.state){
case 'before':
this.state = "first";
for(i=0;i
</head>
<canvas id="cas" width="843" height="641">
</div>
<script>
var canvas = document.getElementById("cas"),
ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
var RAF = (function(){
return requestAnimationFrame || webkitRequestAnimationFrame || mozRequestAnimationFrame || oRequestAnimationFrame || msRequestAnimationFrame || function (callback) {setTimeout(callback, 1000 / 60); };
})();
var stage = {
init:function(){
animate.init();
},
loop:function(){
var _this = this;
ctx.clearRect(0,0,canvas.width,canvas.height);
animate.update(16);
RAF(function(){
_this.loop();
})
}
};
stage.init();
stage.loop();
</script>