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.

 

FLIPBOARD CON jQUERY

Flipboard con jQuery

Flipboard con jQuery

Para empezar mi favorito, Flipboard adaptado a la web. Un diseño de página experimental que te permite navegar por las páginas deslizando o arrastrando como en un folleto, inspirado en Flipboard, para mi la mejor App que tengo instalada. La forma de navegar y de visualizar los artículos resulta realmente amigable, muy sencilla, por lo que ¿por qué no adaptarlo a web?. En mi opinión el futuro web se parecerá mucho a Flipboard, pero quien sabe…

 WEB DRAGABLE MUY VISUAL

Web dragable con jQuery y CSS3

Además de ser dragable horizontalmente, sorprende la navegación.
Las categorías sobre fondo negro resaltan sobre el resto de cuadrados, todos y cada uno de ellos se convierten a full screen al pinchar.

 SLIDE SHOW CON FULL SCREEN

Slide Show jQuert CSS3

Slide Show jQuert CSS3

Casi imprescindible usar el full screen para una buena presentación web, aquí un gran ejemplo que puede ser muy útil para según qué diseños.

 GALERÍA FULL SCREEN

Galería Full Screen jQuery CSS3

Galería Full Screen jQuery CSS3

En este caso, este ejemplo puede servirnos para mostrar una galería de fotos. No sólo nos añade un efecto blur, además nos coloca efectos de texto para mostrar los títulos de las fotos.

SLIDE SHOW CON jmpress.js

Slide Show jQuery jmpress.js

Slide Show jQuery jmpress.js

Sería un slide más, si no fuese por la transición de los contenidos, simulando parallax, muy vistos, merece la pena echarle un vistazo.

 TRANSICIÓN DE PÁGINAS

Transición de páginas con jQuery CSS3

Transición de páginas con jQuery CSS3

Dar un efecto a la transición entre páginas de una web, una forma de añadir espectacularidad a tu web.

GALERÍA EN 3D

Galería 3D jQuery CSS3

Galería 3D jQuery CSS3

Perfectamente logrado el efecto de transición de imágenes para colocarse una sobre la otra.

LIGHTBOX

Lightbox jQuery CSS3

Lightbox jQuery CSS3

Muy sutil y elegante este lightbox.

 FILTRAR UNA GALERÍA

Galería inteligente con jQuery CSS3

Galería inteligente con jQuery CSS3

Este ejemplo muestra con un rollover la información sobre la imagen, pero lo más alucinante, es que podemos hacer un filtro de categorías, al pulsar sobre el botón de filtro, las fotos que no cumplen la condición desaparecen y quedas las que si.

EFECTO BLUR PARA BLOG

Efecto blur en bloques de texto

Efecto blur en bloques de texto

Al colocar el ratón sobre el artículo que queremos leer, los demás desaparecen del primer plano con un efecto blur.

 EFECTOS EN FUNCIÓN DE LA POSICIÓN DEL RATÓN

Rollover inteligente jQuery CSS3

Rollover inteligente jQuery CSS3

Original efecto en el que las descripciones de las cajas aparecen por un sitio u otro, en función de dónde venga el ratón.

EFECTOS PARA THUMBNAILS

Efectos Thumbnails jQuery CSS3

Efectos Thumbnails jQuery CSS3

Uno de los efectos que más me ha sorprendido. El rollover sobre los thumbnails es fluído cuando lo hacemos seguido, si nos detenemos aparece la información del thumbnail.

 EFECTOS PARA MOSTRAR INFORMACIÓN

Efectos rollover con jQuery CSS3

Efectos rollover con jQuery CSS3

10 espectaculares efectos para mostrar información sobre un thumbnail o una categoría de nuestra web.

 ANIMACIÓN DE MENÚ

Info rollover menú jQuery CSS3

Info rollover menú jQuery CSS3

10 ejemplos muy buenos para hacer menús muy originales con CSS3.