Objeto interactivo en 3D con jQuery

jQuery Interactive

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.

(más…)

ascensor.js Código jQuery para navegación web

Navegación web con jQuery

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.

(más…)

Un plugin de jQuery para crear tooltip estilo barra de herramientas

Crear tooltips con jQuery

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.

(más…)

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

¿Cómo hacer una galería de fotos igual que la de Google?

Galería de imágenes Google

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.

(más…)

Slide Down Box Menu, un menú completísimo con jQuery y CSS

Menú con jQuery y CSS

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.

VER DEMO Y DESCARGAR MENÚ SLIDE DOWN BOX

Espectaculares efectos para listas desplegables. jQuery y CSS

Lista desplegable con jQuery y CSS

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 😉

 

VER DEMO Y DESCARGAR ARCHIVO GRATIS LISTAS DESPLEGABLES

 

 

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

Tooltipster, un plugin jQuery súper útil para el usuario

Tooltipster

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.

(más…)

Espectacular menú 3D desplegable con CSS y jQuery !!!

Menú desplegable efecto 3D

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 😉

(más…)

Rollover de imágenes con jQuery

efectos hover con jQuery

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.

(más…)

Los 50 jQuery más usados en el 2012

los 50 jQuery más usados en 2012

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í.

 

VER LOS 50 PLUGINS JQUERY

Impresionante Portfolio Adaptativo con jQuery

Portfolio adaptativo en jQuery

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.

 

VER DEMO Y DESCARGAR CÓDIGO

Librería para gestos multi-touch. Mobile

Biblioteca multi-touch para WebApp

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.

VER VIDEO DEMO EN YOUTUBE

DESCARGAR CÓDIGO

Scroll horizontal, vertical e infinito con jQuery.

Plugin jQuery para hacer Scroll

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.

VISITAR ARTÍCULO ORIGINAL Y DESCARGAR CÓDIGO

HTML5 y Parallax, sus orígenes.

Never Mind the Bullets

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.