Diseño Web. Animación con jQuery

Diseño Web. Animación con jQuery

Magia con jQuery

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.

CONTINUAR LEYENDO “Diseño Web. Animación con jQuery” »

Comparte este Blog de Diseño Web

Animaciones Hover con jQuery

Rollover con jQuer

 

Algunos de vosotros habréis tenido (los menos ;), la curiosidad de ver el portfolio de este blog de diseño web. Al situarte sobre la imagen, esta se desplaza y deja ver otra imagen u html. Es un efecto muy utilizado en galerías, ahorra espacio y además es amigable cara al SEO.

Os dejo aquí el ejemplo y el código para realizar estos efectos con jQuery.

 

Comparte este Blog de Diseño Web

Divierte tus cajas de texto con jQuery

divertirse con jQuery

divertirse con jQuery

Se trata de un plugin experimental en jQuery que lo que hace es amenizar la entrada de texto en las cajas de tu web.

Existe la posibilidad de incluir hasta 5 efectos distintos de animación. Con lo aburrido que es siempre rellenar un formulario, esta puede ser una buena manera de hacerlo más divertido 😉

 

 

VER DEMO

Comparte este Blog de Diseño Web

Plugin jQuery para compartir en redes sociales

Plugin jQuery para insertar redes sociales en tu web

Plugin jQuery para insertar redes sociales en tu web

 #50C1AL es un plugin de jQuery para compartir tu web o blog en las redes sociales.

El plugin es compatible con prácticamente todas las plataformas, Blogger, Delicious, Facebook, Google, MySpace, Twitter, Linkedin, Digg,… Incluye 46 iconos.

Al pulsar sobre el botón de compartir, la web se oscurece con un blur y aparecen los iconos que hayamos seleccionado para compartir en las redes sociales. El plugin es customizable, podemos modificar las animaciones, velocidad y el blur. No se trata de un plugin mejor que otros, pero no podemos negar que es vistoso.

 

VER DEMO Y DESCARGAR CÓDIGO

Comparte este Blog de Diseño Web

Haz arder tu texto con jQuery !!!

Arde tu texto con jQuery

Arde tu texto con jQuery

Pues si, tienes toda la razón, una macarrada !!!
Pero no me digáis que no es potente este plugin jQuery para hacer arder el texto.
Burn jQuery es un plugin que añade un efecto de llama a tu texto, con distintos tipos de sombras y animación.
Admite detenerlo y reiniciarlo dinámicamente, modificar la aceleración y algún que otro detalle más.

VISITAR ARTÍCULO ORIGINAL Y DESCARGAR CÓDIGO

Comparte este Blog de Diseño Web

CSS3 y jQuery !!!. Ejemplos alucinantes.

CSS3 y jQuery. Descubre en este post, alucinantes efectos que te ayudarán en tus próximos diseños web.

En este blog de diseño web podréis encontrar gran variedad de artículos sobre jQuery y CSS3 . 

En esta ocasión, he intentado hacer una selección lo más variada posible, de ejemplos que podemos necesitar, pero sin duda, al que tenga tiempo, le recomiendo que se de un paseo por http://tympanus.net/ para ver la cantidad de ejemplos que nos ofrece esta tecnología.

Se trata de 14 ejemplos de jQuery y CSS3 para mejorar tu web. En algunos casos se trata de ejemplos para integrar en tu web, y en otros, de verdaderos proyectos para generar una web espectacular.

 

CONTINUAR LEYENDO “CSS3 y jQuery !!!. Ejemplos alucinantes.” »

Comparte este Blog de Diseño Web
Alucinantes efectos en texto con jQuery

Alucinantes efectos en texto con jQuery

Efectos en texto con jQuery

Efectos en texto con jQuery

Hoy traemos más jQuery para diseño web. En este caso se trata de efectos aplicados a párrafos y textos en general.

Podréis simular desde el típico efecto de máquina de escribir, hasta los efectos más alucinantes que hasta ahora sólo eran terreno flash.

A continuación os dejo el listado de efectos junto a la dirección en la que podéis descargarlos. Espero que os sirvan.

CONTINUAR LEYENDO “Alucinantes efectos en texto con jQuery” »

Comparte este Blog de Diseño Web
Espectacular jQuery

Espectacular jQuery

Espectacular jQuery

Espectacular jQuery

Diseño web con jQuery, cada vez más y más utilidades para hacer un sitio bueno usable y vistoso”, esto es lo que una y otra vez vemos en todos los post relacionados con el jQuery.

Sigo recopilando utilidades para el diseño web, y sigo sorprendiéndome. No existe límite, las distintas librerías Ajax, como el jQuery o Mootools, nos proporcionan herramientas suficientes para poder construir un sitio web usable y vistoso.

Hoy vamos a ver, desde cómo hacer la galería de productos de Apple, hasta un modo impresionante de ocultar y mostrar información.

CONTINUAR LEYENDO “Espectacular jQuery” »

Comparte este Blog de Diseño Web
PageSlide con jQuery

PageSlide con jQuery

PageSlide con JQuery

PageSlide con JQuery

¿Habéis visto el efecto que produce el iPhone cuando pasamos de una página a otra?, la pantalla se desplaza horizontalmente dejando ver el siguiente contenido. Este plugin permite a cualquier desarrollador crear una interacción similar en su propio sitio web utilizando unas simples líneas de Javascript.

Adjuntando el método a una etiqueta de ancla, pageSlide envuelve el contenido original en una capa y crea un nuevo bloque para el contenido secundario. Al hacer clic en el evento se invocamos la animación.

Una de las ventajas que tiene es que no perdemos de vista la ventana principal, por lo que en cualquier momento el usuario puede volver a su contenido original con solo hacer clic sobre él.

Este plugin lo encontré en los grupos para desarrolladores de google. La verdad es que es una mina, muy recomendable !!!

Más información sobre PageSlide

Comparte este Blog de Diseño Web
Diapositivas con jQuery

Diapositivas con jQuery

Diapositivas con jQuery

Diapositivas con jQuery

A veces necesitamos hacer presentaciones de fotografías de modo automático, tipo diapositivas. Hasta ahora la única solución era meter las imágenes en flash y hacer transiciones entre ellas.

JQuery tiene un plugin llamado CrossSlide capaz de hacer varios tipos de animación cambiando solo un par de parámetros. Las transiciones son bastante fluidas, pero dado que dependen del navegador y de la plataforma que usemos para cambiar el posicionamiento y ver bien estas transiciones, varían los resultados dependiendo de la combinación que tengamos (firefox con windows, Mac o Linux, Explorer, Safari,…).

Toda la explicación de cómo usar este plugin y de cómo usar cada una de las posibilidades de transición las tenéis en Gruppo4.com

Comparte este Blog de Diseño Web
Contenidos con jQuery

Contenidos con jQuery

Contenidos con jQuery

jQuery es una biblioteca javscript que permite manejar eventos, desarrollar animaciones y agregar interacción con tecnología Ajax a nuestras páginas.

Una de sus principales características es su simplicidad. Podemos añadir impresionantes efectos con sólo unas pocas líneas de código, lo cual repercute positivamente en el peso de nuestras páginas.

CONTINUAR LEYENDO “Contenidos con jQuery” »

Comparte este Blog de Diseño Web

¿Cómo diseñar una web mobile?

Diseño de Web para Móviles

Diseño de Web para Móviles

El tráfico de los dispositivos mobile empieza a ser un factor decisivo a la hora de replantearte el diseño de tu web. En este post no vamos a entrar en si es mejor un diseño adaptative o crear uno especial para este tipo de dispositivos, vamos a ver cuales son los factores decisivos que deciden entre el éxito y fracaso de un sitio mobile.

Los usuarios esperan que su experiencia mobile sea al menos tan buena como la de escritorio. Es muy fácil perder clientes y muy difícil ganarlos, sin embargo, no tener sitio mobile ayuda a tu competencia, así que parece claro que la opción es adaptarse, pero hacerlo bien.

CONTINUAR LEYENDO “¿Cómo diseñar una web mobile?” »

Comparte este Blog de Diseño Web
Javascript Vs Flash

Javascript Vs Flash

Javascript Vs Flash

Hasta ahora las animaciones en web eran exclusivas del flash, pero con la entrada del Ajax y de bibliotecas como jQuery, ahora podemos ver animaciones que nos hacen dudar sobre cual de las dos tecnologías ha sido la elegida para realizar la animación.

Esto fue lo que me ocurrió al ver esta web, jwhanif.net La carga es muy rápida y las animaciones tienen una fluidez increíble, como no podía ser de otra manera, mi primera reacción fue pulsar el botón derecho del ratón para comprobar que se trataba de flash… pero no!!

CONTINUAR LEYENDO “Javascript Vs Flash” »

Comparte este Blog de Diseño Web