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á :(