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.

CONTINUAR LEYENDO “Objeto interactivo en 3D con jQuery” »

Comparte este Blog de Diseño Web

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.

CONTINUAR LEYENDO “ascensor.js Código jQuery para navegación web” »

Comparte este Blog de Diseño Web

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.

CONTINUAR LEYENDO “Un plugin de jQuery para crear tooltip estilo barra de herramientas” »

Comparte este Blog de Diseño Web

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

Comparte este Blog de Diseño Web

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

Comparte este Blog de Diseño Web

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

 

 

Comparte este Blog de Diseño Web

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

Comparte este Blog de Diseño Web

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.

CONTINUAR LEYENDO “Tooltipster, un plugin jQuery súper útil para el usuario” »

Comparte este Blog de Diseño Web

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 😉

CONTINUAR LEYENDO “Espectacular menú 3D desplegable con CSS y jQuery !!!” »

Comparte este Blog de Diseño Web

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.

CONTINUAR LEYENDO “Rollover de imágenes con jQuery” »

Comparte este Blog de Diseño Web

Cómo crear fácilmente gráficos utilizando jQuery y HTML5

Dibujar gráficos con HTML5 y jQuery

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

CONTINUAR LEYENDO “Cómo crear fácilmente gráficos utilizando jQuery y HTML5” »

Comparte este Blog de Diseño Web

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

Comparte este Blog de Diseño Web

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

Comparte este Blog de Diseño Web

Haz arder tu texto con jQuery !!!

Arde tu texto con jQuery

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.

VISITAR ARTÍCULO ORIGINAL Y DESCARGAR CÓDIGO

Comparte este Blog de Diseño Web

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

Comparte este Blog de Diseño Web

CSS3 y jQuery !!!. Ejemplos alucinantes.

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.

 

CONTINUAR LEYENDO “CSS3 y jQuery !!!. Ejemplos alucinantes.” »

Comparte este Blog de Diseño Web

Plugins jQuery listos para llevar

jQuery listo para llevar...

MiniJs es un sitio en el que podrás encontrar varios plugins jQuery, listos para integrar en tu web. No son muchos, pero los que están merecen la pena, y supongo que irán añadiendo.

Entre los MiniJs que podemos encontrar tenemos:

  • Count – una cuenta atrás de caracteres como la que podemos encontrar en Twitter.
  • Tip – los Tips son una ayuda genial en el diseño web. Se trata de pequeños globos que hacemos aparecer, para avisar o ayudar a nuestros usuarios. Este tipo de globos, los estaréis viendo ya en muchos formularios jQuery.
  • Slider – un típico slider para ver galerías.
  • Notification – activa una capa para lanzar un mensaje.
  • Feed – un plugin para mostrar tu actividad en Twitter.

Pues bien el código es bastante sencillito, existe algún que otro plugin más y seguramente irán sumando.


 

Comparte este Blog de Diseño Web

Curvar texto con CSS3 y jQuery

Curvar texto con CSS3 y jQuery

En este blog de diseño web, ya hemos visto algún ejemplo de cómo manipular la posición de las fuentes en HTML.

En un post anterior, vimos cómo curvar texto con un CSS y HTML5, también vimos como rotar un texto y por ejemplo, escribir con HTML en vertical.

Aunque CSS3 nos permite rotar las letras, es bastante complicado de organizar cada letra a lo largo de una trayectoria curva. Arctext.js es un plugin de jQuery que te permite hacer exactamente eso.

Basado en Lettering.js, calcula la rotación a la derecha de cada letra y distribuye las letras a través de un arco imaginario según el radio que le indiquemos.

Aquí os dejo código, ejemplos y demás de http://tympanus.net/

 

Comparte este Blog de Diseño Web

Animaciones Hover con jQuery

Rollover con jQuer

 

Algunos de vosotros habréis tenido (los menos ;), la curiosidad de ver el portfolio de este blog de diseño web. Al situarte sobre la imagen, esta se desplaza y deja ver otra imagen u html. Es un efecto muy utilizado en galerías, ahorra espacio y además es amigable cara al SEO.

Os dejo aquí el ejemplo y el código para realizar estos efectos con jQuery.

 

Comparte este Blog de Diseño Web