Ara?a interactiva para el blog, que se mueve

Esto no es como aquella ara?a de Halloween que vimos hace tiempo que no era mas que una imagen GIF animada. Esto es parte de la modernidad web, hecho en canvas, y se trata de una ara?a que se mueve por si sola dentro de su telara?a, y que podemos arrastrar con el cursor, tanto a la ara?a como a la telara?a y sus puntos de apoyo. El demo aqu? mismo.

Este gracioso experimento es de Sub Protocol, y nos servir? como parte de las decoraciones de Halloween en el blog. Este ar?cnido requiere de dos scripts para su funcionamiento, ambos los he alojado para que no tengan que preocuparse por buscar un hosting, pero, he notado que el desempe?o de estas canvas son m?s eficientes si alojamos los scripts directo en la plantilla, o al menos a m? esa percepci?n me ha dado.

Para colocar esta ara?a interactiva en tu blog ingresa en Dise?o | A?adir un gadget | HTML/Javascript y ah? pega este c?digo:

<script src='https://googledrive.com/host/0B1sh31bxfVkGYUVMRXFyeUROQ2s' type='text/javascript'></script>
<canvas id='scratch' style='width: 500px; height: 350px; margin-left: -80px; margin-top: -30px;'></canvas>
<script src='https://googledrive.com/host/0B1sh31bxfVkGbTVWTlhlangwdWM' type='text/javascript'></script>

Si quieres tambi�n puedes hacer que sea "flotante", es decir, que permanezca est?tica sin importar si subimos o bajamos el scroll de la p?gina. Para conseguirlo s?lo a?ade lo siguiente debajo del c?digo anterior.

<style>
#scratch {
position: fixed;
top: 0px;
left: 0px;
}
</style>

Con top indicamos que se muestre arriba, si la quieres abajo c?mbialo por bottom. Con left hacemos que se acomode a la izquierda, si lo quieres a la derecha c?mbialo por right. Toma en cuenta que al hacerla flotante podr?a obstruir alg?n elemento de tu blog que quede por debajo de ella.

Con esta ara?a, esta pr?xima noche de brujas t? y tus lectores podr?n entretenerse un rato en el blog jugando con ella, eso s?, no la saques de su red o la pobre morir? :(