Se trata de unos botones que se sienten atraídos por el puntero del ratón, la interacción es interesante, invita a jugar con el botón.
En la demo de Bestjquery podréis ver varios ejemplos de cómo aplicar este efecto. Si lo queréis descargar, aquí tenéis el botón.
Descargar código
Reloj 3D
Vistosa cuenta regresiva que simula los antiguos paneles que podíamos ver en los aeropuertos.
Podéis ver y descargar el código CSS y JS en CodePen.
jQuery Interactive
En este artículo podréis ver cómo crear un objeto interactivo en 3D mediante imágenes y un simple JS.
Al hacer drag sobre la imagen arrastramos el objeto de tal modo que parece que estamos realizando un giro en 3D. En realidad estamos cargando todas y cada una de las imágenes que componen ese movimiento 360º. El efecto es perfecto para una galería de coches por ejemplo, el único problema es que nos tendremos que hacer con todas las imágenes de la rotación completa.
Navegación web con jQuery
La navegación web en una sola página es una forma de dar al usuario una transición entre secciones natural y muy vistosa.
Para ello existen multitud de plugins jQuery que facilitan el uso de este sistema de navegación.
Todas las áreas de contenido se encuentran en la misma página, y gracias al menú nos vamos desplazando por cada una de ellas.
Crear tooltips con jQuery
Toolbar.js es un plugin de jQuery que nos ayuda a crear fácilmente tooltip estilo barras de herramientas.
Se trata de un plugin muy sencillo que nos permite crear cualquier tipo de barra de herramientas.
Permite abrir la barra desde cualquier elemento, los elementos de la barra de herramientas son fácilmente personalizables. Las barras pueden aparecer horizontales o verticales, por encima o debajo del botón.
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 😉
Galería de imágenes Google
Todos vosotros habréis visto la galería de imágenes de Google, al pinchar sobre cualquiera de los thumbnails, este se despliega con un efecto acordeón, insertando un espacio de información entre las demás miniaturas de la página.
En este post de diseño web, vais a poder acceder a toda la información para implementar una galería exactamente igual a la de Google en vuestro sitio web.
Menú con jQuery y CSS
En este blog de diseño web hemos mostrado numerosos ejemplos de menú, y seguiré añadiendo, porque el menú constituye una parte esencial del diseño web, cada proyecto es un mundo y requiere un menú diferente.
La mayoría de las veces, el menú viene condicionado o bien por la cantidad de secciones que vayamos a utilizar o por los absurdos títulos larguísimos que nos pide el cliente. En el segundo caso es casi esencial convencerle que el titular de un menú ha de ser conciso y breve si queremos que funcione.
Hoy os dejo un menú que me ha parecido muy vistoso y útil. Se trata de un menú en el que al hacer rollover sobre la opción la casilla que contiene el titular se abre con un efecto elástico, en la zona superior aparece una imagen y el texto se desplaza hacia abajo, mostrando, cuando es preciso un submenú a su derecha.
Además de poder descargar todo el código de forma gratuita, podréis consultar con amplio detalle todos los pasos del proceso.
Lista desplegable con jQuery y CSS
Hoy traemos un espectacular efecto para cuando tenemos que utilizar listas desplegables o incluso un menú.
El despliegue es customizable, totalmente configurable para conseguir efectos únicos. Como siempre ojo con los navegadores, se trata de transformaciones y transiciones CSS que como sabéis no todos los navegadores soportan.
El regalo nos lo trae tympanus y nada mejor que verlo para encapricharnos y descargarlo 😉
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.
Tooltipster
Tooltipster es un plugin muy ligero de jQuery, que nos permite facilitar información complementaria al usuario en nuestra web.
Las ventanas de ayuda son del todo customizables, podemos meter desde el simple mensaje de ayuda a una compleja maquetación en HTML. Este tipo de práctica supone un paso de gigante a la hora de hacer más usable una web.
Esta ayuda puede aplicarse tanto en formularios como en diversos elementos interactivos de la web, botones de opciones, imágenes de una galería, incluso como respuesta a la acción sobre un botón, podemos utilizar este plugin para avisar al usuario de que la acción del botón se ha producido con éxito o no, son múltiples los usos que podemos encontrarle.
Menú desplegable efecto 3D
Espectacular, mucho, ¿dónde colocarlo? eso ya es otra cosa…
El caso es que si quieres incorporar a tu diseño web un menú con efecto «persiana 3D», este es el código que necesitas.
Tanto el efecto de desplegar como el de plegar, simulan gravedad. Además, podemos colocarlo de frente o simulando profundidad, creando así aún más sensación de elemento 3D. La fluidez del movimiento es muy buena y eso le hace más real.
Estoy seguro de que más de uno lo va a tener en cuenta para su próximo diseño web, y sobre todo que a nadie dejará indiferente 😉
efectos hover con jQuery
¿Quieres dar un aspecto más interactivo a tu diseño web?, existe la posibilidad de mediante jQuery y CSS meter un efecto a todas las imágenes de tu sitio con el plugin Adipoli.
Se trata de varios efectos que hacen más atractivas las imágenes que mostramos en nuestro sitio. Este plugin en concreto, nos permite elegir entre varios tipos de hover, además, podremos determinar la velocidad de transición y controlar tanto el estado inicial de la imagen como el que se produce al colocar el ratón sobre ella.
Entre los efectos que podremos ver en la demo y que por supuesto podremos descargar gratuitamente, está el paso de la imagen en blanco y negro a color, efectos tipo pop-up, o aclarar u oscurecer imágenes con muy buenas transiciones.
Dibujar gráficos con HTML5 y jQuery
Hasta ahora, el único modo de introducir un buen gráfico en un diseño web, era o bien mediante una imagen, o con flash si queríamos hacer algo dinámico. Ahora, gracias a HTML5 y por supuesto a jQuery, podemos fácilmente hacer un gráfico personalizado de una forma rápida y con un buen diseño.
Para ello, utilizamos el plugin de jQuery visualize.js
los 50 jQuery más usados en 2012
He encontrado en speckyboy.com, un artículo que creo de gran utilidad para tener en cuenta en nuestros diseños web. Se trata de 50 plugins jQuery, de todo tipo.
Entre ellos podrás encontrar plugins para distribuir contenido en la página, plugins para crear efectos, parallax, responsive, menús de navegación, sliders, gráficos, fuentes, etc…
Merece la pena echarle un vistazo, muchos de ellos ya los conoceréis porque los hemos tratado aquí.
Portfolio adaptativo en jQuery
Se trata de un plugin de jQuery muy vistoso, intuitivo y lo más importante, «adaptativo«.
Las imágenes se amontonan por categorías, y al hacer clic sobre cada una de estas categorías, las imágenes que la forman se exparcen por la pantalla.
La distribución de las fotografías, se puede hacer utilizando diferentes transiciones CSS. En el caso de que el navegador no soporte estas trancisiones, jQuery se encargará de hacer un repliegue sencillo.
Para poder agrupar las imágenes en su correspondiente categoría, utilizamos la etiqueta lidata-pile:
<lidata-pile="Group 1">
La distribución de imágenes es adaptativa, se reparten horizontalmente teniendo en cuenta el ancho de pantalla.
Biblioteca multi-touch para WebApp
En numerosas ocasiones se ha recurrido al desarrollo de aplicaciones nativas al no existir la posibilidad de poder realizar ciertos desarrollos para web.
Una de las limitaciones en una aplicación web era el no poder programar gestos multitáctiles, como pellizcar para agrandar o disminuir el zoom, rotar, drag and drop,… Gracias a Hammer.js, ahora podemos implementar todo tipo de gesto multi-touch en nuestra WebApp
Hammer.js es una biblioteca javascript (requiere jQuery) para gestos multitáctiles de apenas 2kb destinado a operar con los gestos multitáctiles, clic, doble clic, arrastrar, mantener pulsado, escalar,…
Además, parece ser que ha sido testada en diferentes smartphones y tablets comprobando su compatibilidad.
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.
Plugin jQuery para hacer Scroll
Plugin para realizar scroll horizontal, scroll vertical y scroll infinito con jQuery.
Súper útil para realizar sliders o incluso para hacer webs tipo parallax. Además de realizar los desplazamientos con aceleración, nos permite poder navegar entre capas con barra de scroll o con botones.
El caso del scroll infinito merece una mención especial. Se trata de realizar una navegación vertical en la que el contenido se va cargando poco a poco mientras nosotros navegamos las primeras pantallas, según vamos aproximándonos al final del scroll, la página vuelve a cargar nuevas secciones.
Never Mind the Bullets
Never Mind the Bullets es un impresionante proyecto realizado en HTML5 y Parallax por Microsoft Corp hace dos años, para demostrar la compatibilidad del Explorer 9 con los estándares de HTML5.
Ahora que Parallax es una realidad y que cada día se está extendiendo más, volvemos a recordar este proyecto como ejemplo de lo que fueron los inicios de esta tecnología y del HTML5.
En la web además de poder customizar la aventura, hay documentación sobre el proyecto y sobre el making off.
Para los que ya lo conocíais y para los que todavía no lo habíais visto, os recomiendo echarle un vistazo.
