jQuery es una tecnología que está alcance de todos. Tanto si usas Blogger como si estás desarrollando aplicaciones con javascript, jQuery es una herramienta que prácticamente no tiene igual.
Técnicamente, jQuery, es una biblioteca (un conjunto de funciones) javascript y es muy fácil tenerla disponible en nuestros sitios con solo copiar una o dos líneas de código.
Hay muchos plugins para jQuery para crear animaciones con CSS, pero no pueden animar el contenido, si no el contenedor. Es decir, pueden hacer rotar y desplazar los banners, pero no hacer que su contenido sea dinámico:
Para crear contenido dinámico para los banners, necesitamos generalmente usar herramientas como Google Web Designer, u otras. Sin embargo los formatos en los que podemos guardar los resultados no son compatibles con Blogger, ni la mayoría de sitios web, o son programas de pago.
Sin embargo, esto podemos hacerlo fácimente, también con jQuery y unos cuantos archivos de imagen.
Es bastante sorprendente que se puedan conseguir estos resultados. Más teniendo en cuenta que se trata de imágenes estáticas, en este ejemplo son PNG, ya que soportan las transparencias y son más indicados para la web.
Para hacerlo semejante cosa, la autora usa los plugins jQuery Easing Plugin y 2D Transformation. Este último ya no se actualiza, y el autor del mismo recomienda jquery.transform.js o su fork de este mismo.
Además de crear el elemento div que contendrá las imágenes a mover por el banner, también hay que crear código CSS y por supuesto, la lógica del "programa", de la que se encargará javascript con los plugins antes mencionados.
Prácticamente, casi todo lo que hay que hacer es darlo órdenes a las imágenes para que se les realicen los efectos y otras acciones, que los plug-ins nos permiten. Este es un pequeño fragmento:
Así que seguramente tengas que hacer alguna variación si quieres tener el código actualizado con la última versión del plugin 2D Transformation. Sin embargo, como podemos ver en el demo, el ejemplo del tutorial todavía sigue funcionando sin ningún problema.
Ten en cuenta que para usar jQuery en tu blog de Blogger o cualquier otra plataforma, has de cargar previamente los archivos necesarios. Esto se puede hacer con un par de sencillas líneas de código (ver jQuery CDN).
Tienes el código completo y el tutorial aquí: tympanus.net
Cómo hacer anuncios que se desplazan con el scroll, también con jQuery.
Técnicamente, jQuery, es una biblioteca (un conjunto de funciones) javascript y es muy fácil tenerla disponible en nuestros sitios con solo copiar una o dos líneas de código.
Hay muchos plugins para jQuery para crear animaciones con CSS, pero no pueden animar el contenido, si no el contenedor. Es decir, pueden hacer rotar y desplazar los banners, pero no hacer que su contenido sea dinámico:
Para crear contenido dinámico para los banners, necesitamos generalmente usar herramientas como Google Web Designer, u otras. Sin embargo los formatos en los que podemos guardar los resultados no son compatibles con Blogger, ni la mayoría de sitios web, o son programas de pago.
Sin embargo, esto podemos hacerlo fácimente, también con jQuery y unos cuantos archivos de imagen.
Banners animados a partir de imágenes estáticas con jQuery
Mary Lou de Codrops ha presentado un tutorial en el que nos explican paso a paso como generar banners animados con esta biblioteca para javascript. El tutorial es de 2010, pero la demostración funciona correctamente. |
| Puedes ver la demo en el sitio enlazado al final. |
Es bastante sorprendente que se puedan conseguir estos resultados. Más teniendo en cuenta que se trata de imágenes estáticas, en este ejemplo son PNG, ya que soportan las transparencias y son más indicados para la web.
Para hacerlo semejante cosa, la autora usa los plugins jQuery Easing Plugin y 2D Transformation. Este último ya no se actualiza, y el autor del mismo recomienda jquery.transform.js o su fork de este mismo.
Además de crear el elemento div que contendrá las imágenes a mover por el banner, también hay que crear código CSS y por supuesto, la lógica del "programa", de la que se encargará javascript con los plugins antes mencionados.
Prácticamente, casi todo lo que hay que hacer es darlo órdenes a las imágenes para que se les realicen los efectos y otras acciones, que los plug-ins nos permiten. Este es un pequeño fragmento:
[{"to" : "1"}, {"effect": "slideOutLeft-slideInLeft"}],[{"to" : "1"}, {"effect": "zoomOut-zoomIn"}],[{"to" : "1"}, {"effect": "slideOutRight-slideInRight"}]
Así que seguramente tengas que hacer alguna variación si quieres tener el código actualizado con la última versión del plugin 2D Transformation. Sin embargo, como podemos ver en el demo, el ejemplo del tutorial todavía sigue funcionando sin ningún problema.
Ten en cuenta que para usar jQuery en tu blog de Blogger o cualquier otra plataforma, has de cargar previamente los archivos necesarios. Esto se puede hacer con un par de sencillas líneas de código (ver jQuery CDN).
Tienes el código completo y el tutorial aquí: tympanus.net
Cómo hacer anuncios que se desplazan con el scroll, también con jQuery.