Share
Au fost o mulțime de postări cu privire la numărul de plug-in-uri uimitoare jQuery și unde să le găsiți. Cu toate acestea, uneori este mai bine să nu se bazeze pe pluginurile și resursele terților. Fă-o tu însuți moda veche! Astăzi, vom analiza 20 de utilizări creative ale jQuery în site-uri și aplicații moderne; să te inspiră pentru următorul proiect.
Unul dintre scriitorii noștri sporadici, James Padolsey, are o caracteristică frumoasă pe site-ul său. O bară "personalizată" din partea dreaptă sus a ecranului vă permite să modificați culoarea de fundal a antetului.
Viziteaza site-ul
Acești tipi sunt aproape dumnezei de design web, iar site-ul lor demonstrează cu adevărat. Trebuie doar să aruncați o privire la navigarea personalizată jQuery pe care o foloseau în pagina lor de pornire. Ai văzut vreodată o navigare atât de sexy în viața ta?
Viziteaza site-ul
FamFamFam avea nevoie de o casetă lightbox personalizată, cum ar fi script-ul pentru FamSpam (whew, spune că de trei ori). Ei au ajuns să construiască ceea ce este acum cunoscut ca FaceBox, care replică efectele casetei lightbox, dar merge mai departe și mai departe, permițându-vă să încărcați în pagini html statice, formulare de contact, orice doriți! FaceBox este acum un plugin jQuery după toate cerințele pentru scenariul lor.
Viziteaza site-ul
În loc să meargă cu un meniu tipic / meniu de control tipic, Grooveshark a amestecat-o puțin și a construit un script jQuery personalizat pentru a vă permite să creați propriile widget-uri de muzică; destul de drăguț într-adevăr.
Viziteaza site-ul
CSS-Tricks, de Chris Coyier, este urmatoarea pe lista cu o navigare jQuery minunat de simpla si creativa. Atunci când link-urile sunt suspendate, în loc să schimbeți imediat culorile, jQuery este folosit pentru a ajuta culoarea să se estompeze încet la culoarea dorită.
Viziteaza site-ul
Dezvoltatorul David Walsh de la DavidWalsh.name implementează un script extrem de simplu de folosit pentru a oferi link-urilor dvs. un pic nudge pe hover. Scriptul folosește capacitățile puternice de animație ale jQuery declanșate pe hover. Consultați legăturile din bara laterală și din subsol pentru a vedea efectul în acțiune.
Viziteaza site-ul
Dacă verificați site-ul CarrotCreative, veți observa de fapt două efecte jQuery cu adevărat unice. În primul rând, dacă faceți clic pe site-urile din partea stângă sus, veți vedea o aplicație unică a unui efect de tip lightbox, care va afișa site-urile și pictogramele. În al doilea rând, dacă faceți clic pe orice link-uri de navigare, veți observa că nu există nici o reîmprospătare, ci că noua pagină se aliniază din dreapta. Chestii tari!
Viziteaza site-ul
Un alt "două pentru unu" special, Bright Creative folosește un efect de strălucire extrem de subtil în navigația lor, care este foarte calmant și cald. În plus, toate paginile de portofoliu au un efect de tabbing, astfel încât nu este nevoie ca utilizatorul să actualizeze pagina de fiecare dată - datorită AJAX și jQuery.
Viziteaza site-ul
Nu cu mult timp în urmă, Connor Zwick ne-a scris un tutorial frumos care demonstrează exact cum să construiască un uimitor drop-down formular de autentificare.
Viziteaza site-ul
Ar fi o insultă să numim acest tip de "marquee" (tremurând cuvintele). În schimb, Aviary a venit cu un "scroller" foarte frumos, pentru a afișa o mulțime de text într-o mică cantitate de spațiu. Chiar mai bine este că scrollerul se va degrada cu grație este javascript este dezactivat.
Viziteaza site-ul
DesignFlavr, cunoscut pentru sursele lor de inspirație de design, a pus împreună un simplu script fadeIn / fadeOut pentru a-și prezenta lucrările de artă și descrierile corespunzătoare. De asemenea, au folosit pluginul lavalamp destul de bine pe navigația principală.
Viziteaza site-ul
Pe pagina de pornire Hv-Designs, veți observa că pictograma RSS începe ca o schiță / schiță a imaginii reale. Apoi, când plutește, icoanele RSS se aprinde în poziție.
Viziteaza site-ul
Pe lângă faptul că este un site absolut hilar, Asylum are propriul scenariu de scrolling. Este greu de pus un deget de ce este unul atat de frumos, dar asta se intampla probabil pentru ca se comporta putin diferit de cele mai multe scripturi de derulare. Aproape pare să se blocheze după ce îi dai un clic.
Viziteaza site-ul
Brian Reindel a creat o pagină web prezentând 5 scripturi personalizate pe care le puteți utiliza oricum doriți. Articolul ia idei și tehnicile javascript anterioare folosite frecvent și utilizează jQuery pentru a le face puternice, compacte și ușor de citit.
Viziteaza site-ul
Coda este bine cunoscut pentru uimitorul său interfață și design-ul site-ului. A pus un foc în comunitatea plugin-ului jQuery, inspirându-i pe mulți dezvoltatori să își creeze efectul tabbing al paginii. În plus, au un efect minunat asupra hover-ului asupra legăturilor din antet.
Viziteaza site-ul
ClarkLab este un autor cunoscut și foarte de succes în ThemeForest. Dacă vizitați portofoliul său de mai jos, veți observa că imaginile de antet mari vor ieși în cele din urmă, arătând toate cele mai recente lucrări. Efectul de estompare este atât de bine făcut și subtil, abia observați noua imagine care apare.
Viziteaza site-ul
Designerul și arta directorului Rob Young a folosit o idee unică de a-și arăta opera de artă pe un ecran Mac simulat. Apoi, utilizând efecte de derulare jQuery, fiecare pagină nouă se glisează în vizualizarea paginii ca și cum ar fi încărcată pe un computer.
Viziteaza site-ul
Pe lângă faptul că este un site uimitor vizual, WDW are câteva script-uri personalizate jQuery personalizate pentru a adăuga clase la anumite elemente pe hover. Verificați efectele atunci când articolele RSS și de navigare sunt suspendate.
Viziteaza site-ul
Un alt efect cu adevărat răcoros - în loc de săgeți, paginarea și AJAX sunt folosite pentru a crea o experiență elegantă și curată a utilizatorului. În plus, navigația are un efect foarte frumos, deși simplu.
Viziteaza site-ul
Mi-am salvat ultimul site preferat pentru ultimul. În primul rând, uită-te la acest design, este minunat unic și reconfortant. Folosind unul dintre cele mai creative script-uri jQuery pe care le-am vazut vreodata, KM are un cursor "foliage-o-meter", in care glisarea creste sau scade frunzele si designul temei, in functie de directia cursorului. Pentru un ou de Paște, asigurați-vă că verificați codul sursă!
Viziteaza site-ul
Rețineți că jQuery este pur și simplu un instrument și este limitat doar de creativitatea și nivelul de calificare. Obțineți unicitate cu desenele și procesul de dezvoltare și s-ar putea să fiți surprinși să vedeți rezultate extraordinare. Asigurați-vă că vă distribuiți oricare dintre site-urile dvs. preferate care prezintă utilizări unice ale jQuery în secțiunea de comentarii de mai jos! ... Și un Digg sau Stumble ar fi foarte apreciat! :)
Accentsconagua