Scrollbar con jQuery y CSS
En diseño web cada vez se ve menos el scroll. De todos modos, hay veces en los que es necesario y si además podemos meter una barra diseñada por nosotros y ocultarla, mejor que mejor.
Este código nos permite ocultar la barra de desplazamiento, apareciendo cuando nos situamos encima de la zona de acción. Un ejemplo que podemos ver en la actividad en tiempo real de Facebook. Este ejemplo está realizado con jQuery y CSS.
Programa para crear Sliders
Está claro que los sliders se implantaron hace tiempo en los diseños web, habrá quien lo tenga perfectamente controlado y habrá quien todavía no sepa muy bien cómo implementar una galería en su web.
Wow Slider es una aplicación que instalamos en nuestra máquina y nos permite crear galerías con diversos efectos, válido tanto para Windows como para Mac. En la web podréis además encontrar una guía rápida que os ayudará a sacar vuestros slides sin problema. Además cuenta con la ventaja de estar también disponible en español.
Aquí os dejo el enlace para que ver la demo y descargarlo
Transiciones realizadas con jQuery y CSS3
4 efectos Flip, 6 efectos de rotación, 3 de multi-flip, 4 efectos cubo, 2 unfold y 7 efectos más que harán que te quedes alucinado con estas transiciones de imágenes, de nuevo con jQuery y CSS3
Más artículos relacionados con jQuery en https://www.gloobs.com/blog/index.php/category/jquery/
Retina display con jQuery
Hoy os dejo una adaptación de la retina display de iPhone para adaptarla a web. Se trata de un efecto lupa que se acciona con el ratón, realizado con jQuery.
La lupa nos muestra la imagen a tamaño original y lo que queda fuera es una reducción de la misma. El efecto resultante es muy vistoso.
Buscador elástico con jQuery y CSS
Seguramente más de uno se habrá fijado en el buscador de Apple. Nada más pinchar sobre él se hace más ancho para dar mayor cabida al texto de búsqueda, pocas cosas hay que haga Apple que luego no marquen tendencia en el diseño web y en todo tipo de diseños.
Hoy os dejo un buscador que hace lo mismo, se expande y además incorpora la famosa «x» que también podemos ver en los buscadores de iPhone o iPad.
Me ha parecido muy interesante, visualmente me parece extraordinario, pero luego además la CSS es muy completa, usa degradados e incorpora también la integración de fuentes externas a las de sistema.
Os dejo aquí la dirección para poder ver la demo y descargaros los archivos.
MÁS EJEMPLOS JQUERY EN BOXTUFFS.COM
Una vez que entréis en Boxtuffs, os aconsejo que echéis un vistazo a todos el material que os ofrece, hay cosas realmente útiles y vistosas.
Efectos jQuery para textos
Este es un efecto que venimos viendo en los nuevos diseños web.
En el artículo «Tendencias Diseño Web para 2012. SCROLL PARALLAX«, podéis ver varios ejemplos con imágenes y textos, que toman vida al hacer scroll sobre la página.
Hoy os dejo el código para realizar efectos con textos, podéis descargar el ejemplo y ver cómo se realizan los distintos efectos de zoom, rotate, fade, … Luego queda la imaginación y aplicar esto en vuestros diseños, el resultado es por lo menos «vistoso y sorprendente», espero que os sirva.
