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
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 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 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 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 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 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 3D jQuery CSS3
Perfectamente logrado el efecto de transición de imágenes para colocarse una sobre la otra.
Lightbox jQuery CSS3
Muy sutil y elegante este lightbox.
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 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
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 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
10 espectaculares efectos para mostrar información sobre un thumbnail o una categoría de nuestra web.
Info rollover menú jQuery CSS3
10 ejemplos muy buenos para hacer menús muy originales con CSS3.
Hola, quisiera saber de donde puedo descargar el source para el flipboard con jquery (el primer ejemplo) Gracias!
muy bueno, tambien me gusta mucho codrops
Muy lovely!!!
Muchas gracias por compartir estos ejemplos 😀
Muy buenos ejemplos.
Tendrían a la mano unos ejemplos de Noticias.
Me refiero a posibles noticias sobre la pagina. No externas
Yo tengo la que cree yo mismo, pero no estaría mal hechar un vistazo talvez un poco mas elegante.
Hola Andrés, ¿te refieres al lightbox?
Buenos dias.. estoy buscando como hacer este efecto de la pagina de: http://www.mercadolibre.com.co/
en la seccion de «Mas vendidos ultima hora» ese efectico de visualizar los articulos en la misma capa sin recargar la pagina…
agradeceria si alguien me puede ayudar.. gracias.
Hola. Estupendo artículo. Paso una consulta. Teniendo la página con dos div verticales, el de la izquierda actuando como menú entre galerías, ¿puedo con jQuery mostrar las imágenes en el div derecho en una galería horizontal desplazando las ya vistas hacia atrás del menú y haciendo visibles las que siguen a la derecha?
¿Como sería?
Desde ya gracias
Buenos días quisiera saber como se hace un libro en 3d como el de http://2012.beercamp.com/
se los agradecería, estoy aprendiendo a medida del trabajo y me gustaría saber como se hace
Aquí tienes el código: http://tympanus.net/codrops/2012/01/30/page-transitions-with-css3/
Genial, muy buen artículo.
hola de antemano la mejor pagina con efectos que eh visto de verdad me encanto su contenido me gustaria saber el codigo de TRANSICIÓN DE PÁGINAS porfavor te lo agradeceria mucho
Muchísimas gracias Omar. Excelente aporte, estoy muy agradecido. Yo me quedo como preferencia y voy a probar GALERÍA EN 3D. Saludos Cordiales.
me gustaria descargar el codigo de «FILTRAR UNA GALERIA» como lo hago.? gracias
Hola, hay posibilidad de implementar los códigos de los menús…
muchas gracias
Hola, no se trata de un paquete que instales y empiece a funcionar, ojalá fuese así de fácil.
En ejemplos como por ejemplo el fullscreen, verás que arriba a la derecha hay un botón que te remite al artículo «back to the codrops article», ahí encontrarás el botón para descargarte el código.
Hola bueno quisiera saber como se instalan como se cual es el codigo a poner cuando lo descargo me sale una cuestion de tres libros quiero saber cual debo meter y donde?
Gracias OMAR. Ahora los probare 😀
Aquí tienes los códigos:
Para SLIDE SHOW —> http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/
Para la galería 3D —> http://tympanus.net/codrops/2012/02/06/3d-gallery-with-css3-and-jquery/
Espero que te sean muy útiles 😉
Gracias Omar, bueno los que mas me interesan son:
– SLIDE SHOW CON jmpress.js
– GALERIA EN 3D
Esos dos me interesan.
Si encuentras como aplicarlo a una web, te loa gradeceria mucho.
Gracias
Hola Jesús,
alguno de ellos si que puedes encontrarlo en este blog, dime cual te interesa y miro a ver si te lo puedo conseguir.
Saludos
Hola, buenos ejemplos, quiero saber si hay alguna manera de poder ver su codigo, para que pueda ser implementado dentro de una pagina web.
Unos diseños espectaculares y efectos fantásticos, me gusta, muchas gracias por los aportes.
Un articulo muy interesante, las posibilidades que nos brinda son casi infinitas…