Magia con jQuery
Ya conocéis mi debilidad por usar Ajax en diseño web, me parece una solución que además de dar usabilidad a nuestra web, nos da oportunidad de sorprender al usuario, captando así su atención.
En esta ocasión vamos a hablar de unas cuantas librerías para hacer animaciones.
Muchos de los ejemplos que vais a ver están en bruto, es decir, no llevan nada de diseño, en vosotros estará el hacer que esas animaciones sean todo lo espectaculares que vuestra imaginación os sugiera.
HUMO CON JQUERY
Este es uno de los ejemplos en los que tendréis que trabajar el diseño. Creo que este efecto lo usaría para una gran cabecera, adaptando el diseño para colocárselo a una chimenea por ejemplo, o a un fondo de cielo cargado de nubes.
UNA POSTAL ANIMADA CON JQUERY
Una postal animada usando imágenes salvadas como png y usando setTimeout() para controlar las secuencias.
UN ROLLOVER ANIMADO CON JQUERY
Este me encanta. Se trata de hacer un rollover de tal modo que las pestañas se mueven al situar el cursor sobre ellas, en uno de los ejemplos además, el autor juega con un efecto de sombra que lo hace más real aún.
MOVIMIENTO DE BACKGROUND CON JQUERY
En este ejemplo podréis ver una cabecera diseñada con un gradiente y sobre la cual se han colocado imágenes png. El gradiente va desplazándose verticalmente dando distintos efectos al conjunto. Además dependiendo del horario marcado por la máquina del usuario el fondo será distinto.
Os dejo tres ejemplos.
- Ver tutorial I y descargar código
- Ver tutorial II y descargar código
- Ver tutorial III y descargar código
ROTACIÓN DE BANNERS CON JQUERY
Una gran ayuda para aquellos sitios en los que vayáis a integrar publicidad. En el ejemplo además de daros el código jQuery os enseñan la CSS y el HTML. Más útil que vistoso.
EFECTOS ROLLOVER CON JQUERY. EFECTO BLEND
A los que me seguís, este efecto os sonará porque es el que puse en mi web personal www.gloobs.com, la verdad es que a mi me encanta y creo que puede ser utilizado en todo tipo de diseños.
UNA WEB “MÓVIL” CON JQUERY.
Cuando vi el ejemplo me pareció muy divertido y útil. Lo primero que se me pasó por la cabeza fue guardarlo por si algún día tengo que diseñar una web para niños.
Se trata de un simple movimiento horizontal de la pantalla, que producimos al usar las distintas pestañas de la web.
EFECTO REBOTE DE PERSIANA CON JQUERY
Muy vistoso para botones, echadle un vistazo.
SEGUIMIENTO DEL CURSOR DEL RATÓN CON JQUERY
Efecto más que utilizado en flash que ahora podréis realizar con jQuery.
CONTROLAR LOS MOVIMIENTOS DEL USUARIO CON JQUERY
Sencillamente espectacular. jQuery controla el gesto que hemos realizado con el ratón, y detecta si es o no es correcto. Para aquellos que tengáis android, es igual que el bloqueo y desbloqueo que se realiza según la combinación de movimientos que hagamos.
OTROS POST RELACIONADOS CON AJAX, JQUERYY MOOTOOLS
Ver todos los post relacionados
[...] This post was mentioned on Twitter by Miguel Hinojosa, Omar Benyakhlef . Omar Benyakhlef said: Diseño Web. Animación con jQuery http://gloobs.wordpress.com/2009/11/27/diseno-web-animacion-con-jquery/ [...]
noviembre 27th, 2009 at 13:34Realmente muy buen post, es increible todo lo que se puede hacer con Jquery+Ajax.
noviembre 28th, 2009 at 20:23Muy buen post, me ha gustado mucho las posibilidad de esta utilidad, seguro que tendre tiempo de probarla.
Un Saludo.
diciembre 3rd, 2009 at 11:41[...] http://gloobs.wordpress.com/2009/11/27/diseno-web-animacion-con-jquery/ [...]
diciembre 5th, 2009 at 2:46Hola estuve revisando tu blog y me parece muy interesante y entretendido, sobre todo que la información es detallada y precisa, espero que sigas posteando más temas para informarnos y comentar.
diciembre 5th, 2009 at 17:56Saludos.
Déjame felicitarte, que bueno que está tu blog los temas tienen la información exacta que me interesa, sigue posteando más sobre estos temas de color y diseño.
diciembre 5th, 2009 at 17:57Saludos.
[...] Os traigo un enlace un post en el que se muestran una serie de animaciones con jQuery aparecido en el blog de Gloobs. Los ejemplos que trae son los siguientes, entrad al post en el blog original para [...]
diciembre 5th, 2009 at 18:16[...] Diseño Web. Animación con jQuery [...]
diciembre 7th, 2009 at 11:05Gracias Hostper, me alegra que te sea de utilidad este blog de diseño web. Si tienes alguna preferencia no dudes en contármelo.
diciembre 11th, 2009 at 10:21Gracias, de verdad, y un saludo a todos los amigos de Perú.
diciembre 11th, 2009 at 10:21muy interesante
diciembre 11th, 2009 at 19:46Increible muy buena recopilación de recursos, sobre todo el de animación de fondos me ha encandilado, espero usarlo pronto….por cierto si te interesa intercambiar enlaces con mi blog que tiene la misma temática estaré encantado.
diciembre 11th, 2009 at 22:09Sometimes it’s really that simple, isn’t it? I feel a little stupid for not thinking of this myself/earlier, though.
diciembre 19th, 2009 at 22:45Muy bueno el post e increibles las transicciones que se pueden hacer con jquery
diciembre 22nd, 2009 at 19:24Que genial JQuery! Gracias por el aporte, muy bueno como siempre.
febrero 26th, 2010 at 16:44Saludos!
Gracias Belén, yo también ando loco con esta tecnología que ha dejado de ser futuro para convertirse en presente.
marzo 1st, 2010 at 10:27Saludos !!
Soy fiel aférrimo a las librerias JQuery.
Gracias por el aporte, siempre ofreciendo muy buenos links y contenido muy pero que muy útil.
Saludos,
mayo 1st, 2010 at 6:05Gracias por el aporte, muy buenos los tutoriales.
junio 23rd, 2010 at 13:25Saludos!
La unica desventaja que veo a ajax es que se come todo el SEO ya que google no encuentra los enlaces tipo javascript.
junio 30th, 2010 at 19:38Es cierto que en un principio existían muchos problemas tanto en SEO como en usabilidad (botón atrás…), pero muchas de estas carencias se han eliminado ya, se trata de buscar y en muchas de las ocasiones encontrarás buenos ejemplos que respetan estas dos técnicas.
julio 2nd, 2010 at 8:45Muy bueno este blog, las personas que lean los post de verdad se darán cuenta que son muy interesantes. Éxitos con los trabajos desarrollados.
Saludos…
enero 24th, 2011 at 23:45[...] Iconos Open Source Diseño Web. Animación con jQuery http://gloobs.wordpress.com/2009/11/27/diseno-web-animacion-con-jquery/ [...]
febrero 19th, 2011 at 14:30Muy util, algunos de ellos los he revisado bastante para incluir en mi sitio y en definitiva dan una apariencia bastante atractiva.
marzo 24th, 2011 at 13:44[...] EL CONTENIDO DE ESTE POST HA SIDO TRASLADADO A http://www.gloobs.com/blog [...]
mayo 20th, 2011 at 12:06Muy buenos ejemplos de animación en jquery es bastante practico y util.
junio 6th, 2011 at 10:53