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
Con el diseño web adaptativo ya no hay preocupación por la redirección de los enlaces.
Muy buenos ejemplos de animación en jquery es bastante practico y util.
Muy util, algunos de ellos los he revisado bastante para incluir en mi sitio y en definitiva dan una apariencia bastante atractiva.
Muy 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…
Es 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.
La unica desventaja que veo a ajax es que se come todo el SEO ya que google no encuentra los enlaces tipo javascript.
Gracias por el aporte, muy buenos los tutoriales.
Saludos!
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,
Gracias Belén, yo también ando loco con esta tecnología que ha dejado de ser futuro para convertirse en presente.
Saludos !!
Que genial JQuery! Gracias por el aporte, muy bueno como siempre.
Saludos!
Muy bueno el post e increibles las transicciones que se pueden hacer con jquery
Sometimes it’s really that simple, isn’t it? I feel a little stupid for not thinking of this myself/earlier, though.
Increible 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.
muy interesante
Gracias, de verdad, y un saludo a todos los amigos de Perú.
Gracias Hostper, me alegra que te sea de utilidad este blog de diseño web. Si tienes alguna preferencia no dudes en contármelo.
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.
Saludos.
Hola 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.
Saludos.
Muy buen post, me ha gustado mucho las posibilidad de esta utilidad, seguro que tendre tiempo de probarla.
Un Saludo.
Realmente muy buen post, es increible todo lo que se puede hacer con Jquery+Ajax.