Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Roundups

Los 20 usos más prácticos y creativos de jQuery

by
Read Time:6 minsLanguages:

Spanish (Español) translation by Valentino (you can also view the original English article)

Ha habido muchas publicaciones sobre la cantidad de increíbles complementos de jQuery y dónde encontrarlos. Sin embargo, a veces es mejor no depender de complementos y recursos de terceros.  ¡Hazlo tu mismo a la antigua! Hoy, veremos más de 20 usos creativos de jQuery en sitios web y aplicaciones de hoy en día; seguro que te inspirará para tu próximo proyecto.

  • Conmutador de color James Padolsey

    Screenshot 1Screenshot 1Screenshot 1

    Uno de nuestros escritores esporádicos, James Padolsey, tiene una característica interesante en su sitio web. Una barra de "personalizar" en la parte superior derecha de la pantalla te permite cambiar el color de fondo del encabezado.

    Visitar sitio

  • Navegación jQuery de Dragon Interactives

    Screenshot 1Screenshot 1Screenshot 1

    Estos tipos son dioses del diseño web y su sitio realmente lo demuestra. Solo echa un vistazo a la navegación personalizada de jQuery que usaron en su página de inicio. ¿Alguna vez has visto una navegación tan sexy en tu vida?

    Visitar sitio

  • FamSpams FaceBox

    Screenshot 2Screenshot 2Screenshot 2

    FamFamFam necesitaba una caja de luz personalizada como un script para FamSpam (bueno, digamos que tres veces). Terminaron construyendo lo que ahora se conoce como FaceBox, que replica los efectos de la caja de luz, pero va más allá al permitirte cargar páginas html estáticas, formularios de contacto, ¡cualquier cosa que desees realmente!  FaceBox es ahora un complemento de jQuery después de toda la demanda de su script.

    Visitar sitio

  • Creador de widgets de Grooveshark

    Screenshot 3Screenshot 3Screenshot 3

    En lugar de ir con un menú flash / menú de control típico, Grooveshark lo mezcló un poco y construyó un script jQuery personalizado para permitirte crear tus propios widgets de música; bastante ingenioso de hecho.

    Visitar sitio

  • Navegación de aparición gradual de trucos CSS

    Screenshot 4Screenshot 4Screenshot 4

    CSS-Tricks, de Chris Coyier, es el siguiente en la lista con una navegación jQuery maravillosamente simple y creativa. Cuando se coloca el cursor sobre los enlaces, en lugar de cambiar los colores inmediatamente, se usa jQuery para ayudar a que el color se desvanezca lentamente al color deseado.

    Visitar sitio

  • David Walsh Link Nudge

    Screenshot 5Screenshot 5Screenshot 5

    El desarrollador David Walsh de DavidWalsh.name implementa un script extremadamente simple de usar para dar a tus enlaces un pequeño empujón al pasar el mouse.  El script utiliza las sólidas capacidades de animación de jQuery que se activan al pasar el mouse. Consulta los enlaces en la barra lateral y en el pie de página para ver el efecto en acción.

    Vistitar sitio

  • Lightbox de sitios personalizados de CarrotCreative

    Screenshot 6Screenshot 6Screenshot 6

    Si visitas el sitio web CarrotCreative, notarás dos efectos jQuery realmente únicos. En primer lugar, si haces clic en los sitios en la parte superior izquierda, verás una aplicación única de un efecto similar a una caja de luz que enumera sus sitios e iconos.  En segundo lugar, si haces clic en cualquier enlace de navegación, notarás que no hay actualización, pero que la nueva página simplemente se desliza desde la derecha. ¡Cosas interesantes!

    Visitar sitio

  • Cartera BrightCreative

    Screenshot 7Screenshot 7Screenshot 7

    Otro especial de "dos por uno", Bright Creative utiliza un efecto de brillo extremadamente sutil en su navegación que es muy calmante y cálido. Además, todas las páginas de su cartera tienen un efecto de tabulación, por lo que no es necesario que el usuario actualice la página cada vez, gracias a AJAX y jQuery.

    Visitar sitio

  • Formulario de inicio de sesión increíble

    Screenshot 1Screenshot 1Screenshot 1

    No hace mucho, Connor Zwick nos escribió un buen tutorial que demuestra exactamente cómo crear un increíble formulario de inicio de sesión desplegable.

    Visitar sitio

  • Desplazador de aplicaciones de Aviary

    Screenshot 8Screenshot 8Screenshot 8

    Sería un insulto llamar a esto un tipo de "marquesina" (se estremece al pronunciar esa palabra).  En cambio, Aviary ideó un 'scroller' muy atractivo y funcional para mostrar una gran cantidad de texto en una pequeña cantidad de espacio. Aún mejor es que el scroller se degradará elegantemente si javascript está deshabilitado.

    Visitar sitio

  • Efecto de desvanecimiento destacado de DesignFlavr

    Screenshot 9Screenshot 9Screenshot 9

    DesignFlavr, conocido por sus excelentes fuentes de inspiración de diseño, armó un guión simple fadeIn / fadeOut para mostrar sus obras de arte destacadas y las descripciones correspondientes. Además, han utilizado bastante bien el complemento lavalamp en su navegación principal.

    Visitar sitio

  • Hv-Designs se desvanecen en el icono RSS

    Screenshot 11Screenshot 11Screenshot 11

    En la página de inicio de Hv-Designs, notarás que el icono de RSS comienza como un esquema / boceto de la imagen real. Luego, cuando se desplaza, los íconos de rss 'brillan' en su lugar.

    Visitar sitio

  • Desplazamiento personalizado de manicomios

    Screenshot 12Screenshot 12Screenshot 12

    Además de ser un sitio web absolutamente divertido, Asylum tiene su propio guión de desplazamiento de "artículos destacados".  Es difícil señalar por qué este es tan agradable, pero probablemente se deba a que se comporta de manera ligeramente diferente a la mayoría de los scripts de desplazamiento. Casi parece encajar en su lugar después de darle un clic.

    Visitar sitio

  • 5 trucos de JavaScript simplificados con jQuery

    Screenshot 14Screenshot 14Screenshot 14

    Brian Reindel creó una página web que muestra 5 scripts personalizados que puedes usar como desee. El artículo toma ideas y técnicas de javascript anteriores que se utilizan con frecuencia y utiliza jQuery para hacerlas poderosas, compactas y fáciles de leer.

    Visitar sitio

  • Sitio web completo de Codas

    Screenshot 15Screenshot 15Screenshot 15

    Coda es bien conocido por su increíble interfaz de usuario y diseño de sitios. Prendió fuego en la comunidad de complementos de jQuery al inspirar a muchos desarrolladores a recrear su efecto de tabulación de página.  Además, tienen un maravilloso efecto de desplazamiento sobre los enlaces ubicados en el encabezado.

    Visitar sitio

  • Efecto de desvanecimiento de Clark Lab

    Screenshot 16Screenshot 16Screenshot 16

    ClarkLab es un autor muy conocido y exitoso en ThemeForest. Si visitas su portafolio a continuación, notarás que las imágenes de encabezado grandes eventualmente se desvanecen a la siguiente, mostrando todo su último trabajo.  El efecto de desvanecimiento está tan bien hecho y es tan sutil que apenas se nota que aparece la nueva imagen.

    Visitar sitio

  • Rob Young | E es para el esfuerzo

    Screenshot 17Screenshot 17Screenshot 17

    El diseñador y director de arte Rob Young utilizó una idea única de mostrar su obra de arte en una pantalla de Mac simulada. Luego, utilizando los efectos de desplazamiento de jQuery, cada nueva página se desliza en la vista de página como si se estuviera cargando en una computadora.

    Visitar sitio

  • Muro del diseñador web

    Screenshot 18Screenshot 18Screenshot 18

    Además de ser un sitio web visualmente impresionante, WDW presenta algunas secuencias de comandos jQuery personalizadas únicas para agregar clases a ciertos elementos al pasar el mouse. Echa un vistazo a los efectos cuando se desplaza el cursor sobre los rss y los elementos de navegación.

    Visitar sitio

  • Junaid W. Hanif

    Screenshot 19Screenshot 19Screenshot 19

    Otro efecto de tabulación realmente genial: en lugar de flechas, sin embargo, se usa la paginación y AJAX para crear una experiencia de usuario elegante y limpia. Además, la navegación tiene un efecto muy agradable aunque simple.

    Visitar sitio

  • KomodoMedia

    Screenshot 19Screenshot 19Screenshot 19

    He guardado mi sitio favorito para el final. Primero, mira ese diseño, es maravillosamente único y reconfortante.  Usando uno de los scripts de jQuery más creativos que he visto, KM tiene un control deslizante 'foliage-o-meter' donde deslizarlo aumenta o disminuye el follaje y el diseño del tema, dependiendo de la dirección en que se mueva el control deslizante.  ¡Para un huevo de pascua, asegúrate de consultar el código fuente!

    Visitar sitio

Ten en cuenta que jQuery es simplemente una herramienta y solo está limitado por su creatividad y nivel de habilidad. Sé único con tus diseños y proceso de desarrollo, y es posible que te sorprendas al ver que se obtienen excelentes resultados.  ¡Asegúrate de compartir cualquiera de tus sitios web favoritos con usos únicos de jQuery en la sección de comentarios a continuación! ... ¡Y un Digg o Stumble sería muy apreciado! :)

  • Suscríbete a la fuente RSS de NETTUTS para obtener más información y artículos sobre desarrollo web diarios.
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.