Araña interactiva para el blog, que se mueve

10 de octubre de 2014 27 comentarios ,

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



27 comentarios en:

" Araña interactiva para el blog, que se mueve "

  1. Perfecto!!! Llevaba unos días pensando en como decorar el blog

    ResponderEliminar
  2. No soy de decorar el blog, pero la arañita me ha gustado. Ya la tengo instalada. Gracias
    He probado para ver si el código para que sea flotante valga para otros widget, pero ya he visto que no, jejejeje

    ResponderEliminar
    Respuestas
    1. De hecho esos estilos sí valen para cualquier gadget o elemento de tu blog. Cualquiera. Sólo debes cambiar la ID del gadget, en este caso el ID es #scratch, y sustituirlo por el que desees. Por ejemplo, si quisieras hacer flotante el gadget de Etiquetas quedaría así:

      #Label1 {
      position: fixed;
      top: 0px;
      left: 0px;
      }

      Eliminar
  3. Que chulada...ya la tengo en uno de mis bloc.
    Gracias Potro

    ResponderEliminar
  4. Respuestas
    1. Esa es la intención, porque mayor utilidad no tiene :P

      Eliminar
  5. Excelente Potro. Me lo llevo para mi blog. Saludos

    ResponderEliminar
  6. Pues si que vamos bien, Potro, entre la lluvia del anterior post y la arañita de éste me voy a plantear no volver a tu blog jajajajajaa, es broma, siendo sincera, me ha gustado la araña, es muy simpática y eso que no es un bichejo que me apasione pero, tiene su encanto, menos mal que no has puesto una cucaracha porque, entonces, oirías mi grito ahí, en México jajaja
    Que sepas que te tomo la palabra de esa invitación a café que me ofreciste, aunque tendría que ser yo la que te invitara a ti por todas las ayudas que me has dado a lo largo de éstos años, así que, si voy a México algún día, nos tomamos ese café y ya luego discutimos sobre quien paga
    Abrazos

    ResponderEliminar
    Respuestas
    1. Jajaja, menos mal que tiene su encanto la arañita, ya me habías asustado con tu planteamiento ):

      Eliminar
  7. Muy divertida esta arañita para poner el blog acorde a esta fecha. Saludos

    ResponderEliminar
  8. Muy interesante! Gracias! Con tu permiso, aquí te dejo la muestra de cómo quedó en el blog que estoy iniciando! http://tutorcesarm.blogspot.com

    ResponderEliminar
  9. Gracias hermanito, se ve super <3

    ResponderEliminar
  10. jajajajajajajaja pues tiene hasta su encanto, y eso que lo de las arañas no me van nada jajajaja

    ResponderEliminar
  11. Saludos Potro como todos tus post.. muy buenos.. la instale en en mi blog solo que veo se hace muy lenta la pagina al cargar.. sera por el tipo de script?... de todas formas esta fantastica.. un Abrazo !!!!

    ResponderEliminar
    Respuestas
    1. Sí, casi todas las canvas son iguales y se vuelven lentas, al menos es sólo para estas fechas :)

      Eliminar
  12. Hola Potro, ¿puede haber alguna razón por la que no funcione? El gadget se queda simplemente en blanco.

    Saludos :)

    ResponderEliminar
    Respuestas
    1. Hola Priscila, no sé si algún otro script de tu blog pueda estar interfiriendo, también puedes probar verlo desde otro navegador por si acaso fuera el navegador el que no lo muestra correctamente.

      Eliminar
  13. como puedo ponerla en un post del blog????

    ResponderEliminar
    Respuestas
    1. Supongo que basta con poner el código dentro del post, pero no lo he intentado.

      Eliminar
  14. Tengo un problema:quiero editar la plantilla de mi blog pero no me deja.Dice que algo ha fallado,que recarge la pagina o si no que borre el cache y las cookies del navegador o que busque una solucion en el foro.¿Que puedo hacer?

    ResponderEliminar
    Respuestas
    1. Hola, ¿ya probaste con lo que te sugiere Blogger? es decir, ¿eliminar las cookies, caché e historial del navegador? primero prueba con eso, si eso no lo resuelve intenta ingresar más tarde, algunas veces es temporal.

      Eliminar
  15. Curioso que el diseño de la propia red (la telaraña) sea el tan efectivo de una espiral geométrica.
    Aparte de simpático, muy... mmm... " a qué".
    :) Gracias. Y un millón de besos.

    ResponderEliminar
    Respuestas
    1. Es que esta araña es obsesiva-compulsiva, por eso tanta geometría ;)
      Besos, preciosa.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger