Ha habido un montón de publicaciones sobre la cantidad de increíbles complementos de jQuery y dónde encontrarlos. Sin embargo, a veces es mejor no confiar en complementos y recursos de terceros. ¡Hazlo tú mismo a la antigua! Hoy, veremos más de 20 usos creativos de jQuery en los sitios web y aplicaciones de hoy en día; Seguro que te inspirará para tu próximo proyecto..
Uno de nuestros escritores esporádicos, James Padolsey, tiene una buena característica en su sitio web. Una barra de "personalización" en la parte superior derecha de la pantalla le permite cambiar el color de fondo del encabezado.
Visitar sitio
Estos chicos son prácticamente dioses del diseño web, y su sitio realmente lo demuestra. Solo eche un vistazo a la navegación jQuery personalizada que utilizaron en su página de inicio. ¿Alguna vez has visto una navegación tan sexy en tu vida??
Visitar sitio
FamFamFam necesitaba una secuencia de comandos personalizada como lightbox para FamSpam (aunque, digamos que tres veces). Terminaron construyendo lo que ahora se conoce como FaceBox, que replica los efectos de lightbox, pero va más allá y le permite cargar en páginas html estáticas, formularios de contacto, ¡lo que desee! FaceBox ahora es un complemento de jQuery después de toda la demanda de su script.
Visitar sitio
En lugar de ir con un menú de control / menú de flash típico, Grooveshark lo mezcló un poco y creó un script jQuery personalizado para permitirte crear tus propios widgets de música; bastante ingenioso de hecho.
Visitar sitio
CSS-Tricks, de Chris Coyier, es el siguiente en la lista con una navegación jQuery maravillosamente simple y creativa. Cuando los enlaces se desplazan sobre, en lugar de cambiar de color de forma inmediata, jQuery se utiliza para ayudar a que el color se difumine lentamente al color deseado.
Visitar sitio
El desarrollador David Walsh de DavidWalsh.name implementa un script extremadamente simple de usar para darle a tus enlaces un pequeño empujón al pasar el cursor. El script utiliza las potentes capacidades de animación de jQuery activadas al pasar el cursor. Echa un vistazo a los enlaces en la barra lateral y en el pie de página para ver el efecto en acción.
Visitar sitio
Si visita el sitio web de CarrotCreative, realmente notará dos efectos jQuery realmente únicos. En primer lugar, si hace clic en los sitios en la parte superior izquierda, verá una aplicación única de efecto de 'caja de luz' que enumera sus sitios e íconos. En segundo lugar, si hace clic en cualquiera de los enlaces de navegación, notará que no hay actualización, pero que la nueva página simplemente se desliza desde la derecha. Cosas interesantes!
Visitar sitio
Otro "dos por uno" especial, Bright Creative usa 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
No hace mucho tiempo, 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
Sería un insulto llamar a esto un tipo de "marquesina" (escalofríos pronunciando esa palabra). En cambio, Aviary ideó un 'control' muy agradable para mostrar una gran cantidad de texto en una pequeña cantidad de espacio. Aún mejor es que la rueda de desplazamiento se degradará correctamente si JavaScript está deshabilitado.
Visitar sitio
DesignFlavr, conocido por sus grandes fuentes de inspiración de diseño, creó un sencillo script fadeIn / fadeOut para mostrar sus ilustraciones destacadas y las descripciones correspondientes. Además, han usado bastante bien el plugin lavalamp en su navegación principal.
Visitar sitio
En la página de inicio de Hv-Designs, notará que el ícono de RSS comienza como un esquema / boceto de la imagen real. Luego, cuando se desplaza, los iconos rss 'brillan' en su lugar.
Visitar sitio
Además de ser un sitio web absolutamente hilarante, Asylum tiene su propio script de desplazamiento de 'artículos destacados'. Es difícil señalar por qué este es tan bueno, 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
Brian Reindel creó una página web que muestra 5 scripts personalizados que puede utilizar como desee. El artículo toma ideas y técnicas de javascript anteriores que se utilizan con frecuencia y utiliza jQuery para hacerlas potentes, compactas y fáciles de leer..
Visitar sitio
Coda es bien conocido por su increíble interfaz de usuario y diseño del sitio. Se encendió bajo la comunidad de plugins jQuery al inspirar a muchos desarrolladores a volver a crear el efecto de tabulación de sus páginas. Además, tienen un maravilloso efecto de desplazamiento en los enlaces ubicados en el encabezado.
Visitar sitio
ClarkLab es un autor muy conocido y muy exitoso en ThemeForest. Si visita su portafolio a continuación, notará que las imágenes de encabezado grandes eventualmente se desvanecerán a la siguiente, mostrando todo su último trabajo. El efecto de atenuación está tan bien hecho y es tan sutil que apenas se nota la nueva imagen que aparece..
Visitar sitio
El diseñador y director artístico Rob Young utilizó una idea única de mostrar sus obras de arte en una pantalla simulada de Mac. Luego, utilizando los efectos de desplazamiento de jQuery, cada nueva página se desliza en la vista de la página como si se estuviera cargando en una computadora.
Visitar sitio
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 cursor. Echa un vistazo a los efectos cuando el rss y los elementos de navegación se desplazan sobre.
Visitar sitio
Otro efecto de tabulación realmente genial: en lugar de flechas, la paginación y AJAX se utilizan para crear una experiencia de usuario elegante y limpia. Además, la navegación tiene un efecto muy agradable aunque simple..
Visitar sitio
He guardado mi sitio favorito absoluto para el final. Primero, solo mire ese diseño, es maravillosamente único y reconfortante. Utilizando uno de los scripts 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 mueve el control deslizante. Para un huevo de Pascua, asegúrese de revisar el código fuente!
Visitar sitio
Tenga en cuenta que jQuery es simplemente una herramienta y solo está limitado por su creatividad y nivel de habilidad. Sea único con sus diseños y proceso de desarrollo, y le sorprenderá ver los grandes resultados que se producen. Asegúrese de compartir cualquiera de sus 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! :)