Fondo animado con un canvas

[Nicolas Zuasti]

Copiele el codigo al amigo de grifo.tv

Con paper.js propiamente cargado agregar el siguiente código dentro del body de la pagina:

<script type="text/paperscript" canvas="myCanvas">

    function onFrame(a){top+=($(window).scrollTop()-top)*.5;for(i=0;i<l;i++){var b=Math.sin(a.time*paths[i].speedX+i);var c=Math.cos(a.time*paths[i].speedY+i);if(i*.5==parseInt(i*.5)){paths[i].rotate(paths[i].speedR)}else{paths[i].rotate(-paths[i].speedR)}paths[i].offsetY-=.03*paths[i].size;paths[i].position.x=$(window).width()/l*i+b*paths[i].randomX;paths[i].position.y=paths[i].posY+c*paths[i].randomY-top+paths[i].offsetY;if(paths[i].position.y+$(window).scrollTop()<-100){paths[i].offsetY=$(window).height()+$(window).scrollTop()+100}}}var i;var l=15;var paths=[];for(i=0;i<l;i++){var size=3+15*Math.random();if(i/3!=parseInt(i/3)){paths[i]=new Path.RegularPolygon(new Point(size,size),parseInt(3+Math.random()*6),size)}else{paths[i]=new Path.Rectangle([size*.75,size*.75],[size,size])}paths[i].size=size*2;paths[i].selected=true;paths[i].rotate(360/l*i);paths[i].randomX=3+Math.random()*30;paths[i].randomY=3+Math.random()*30;paths[i].speedX=.5+Math.random()*2;paths[i].speedY=.5+Math.random()*2;paths[i].speedR=.1+Math.random()*.4;paths[i].posY=100+Math.random()*$(window).height()*3.5;paths[i].offsetY=0;if(i/3==parseInt(i/3)){paths[i].smooth()}}var top=0

</script>

<canvas id="myCanvas" resize></canvas>

Disfrutar

A.P. Nicolás Zuasti
@zonical.net/cv