Share
Det har varit gott om inlägg på antalet fantastiska jQuery-plugins och var att hitta dem. Ibland är det dock bäst att inte förlita sig på plugins och resurser från tredje part. Gör det själv det gammaldags sättet! Idag ska vi titta på 20 + kreativa användningsområden av jQuery på moderna webbplatser och applikationer. Säkert att inspirera dig till ditt nästa projekt.
En av våra sporadiska författare, James Padolsey, har en bra funktion på hans hemsida. En "anpassa" -fältet längst upp till höger på skärmen gör att du kan ändra bakgrundsfärgen på rubriken.
Besök sida
Dessa killar är ganska gudar av webbdesign, och deras webbplats bevisar verkligen det. Ta en titt på den anpassade jQuery-navigationen som de använde på deras hemsida. Har du någonsin sett en sådan sexig navigering i ditt liv?
Besök sida
FamFamFam behövde en anpassad ljuslåda som manus för FamSpam (whew, säg det tre gånger). De slutade bygga vad som nu är känt som FaceBox, vilket replikerar effekterna av lightbox, men går utöver att låta dig ladda in statiska HTML-sidor, kontakta formulär, allt du vill ha! FaceBox är nu ett jQuery-plugin efter all efterfrågan på deras skript.
Besök sida
Istället för att gå med en typisk snabbmeny / kontrollmeny, blandade Grooveshark det lite och byggde ett anpassat jQuery-skript som låter dig skapa egna musik widgets; ganska snyggt faktiskt.
Besök sida
CSS-Tricks, av Chris Coyier, är uppe på listan med en underbart enkel och kreativ jQuery-navigering. När länkarna svängs över, istället för att omedelbart byta färger, används jQuery för att hjälpa färgen att blekna långsamt till önskad färg.
Besök sida
Utvecklaren David Walsh av DavidWalsh.name implementerar ett extremt enkelt att använda skript för att ge dina länkar lite nudge på svävaren. Skriptet använder de starka animeringsfunktionerna för jQuery utlöst på svävaren. Kolla in länkarna i sidofältet och i sidfoten för att se effekten i åtgärd.
Besök sida
Om du kolla in CarrotCreative-webbplatsen kommer du faktiskt att märka två riktiga unika jQuery-effekter. För det första, om du klickar på webbplatser längst upp till vänster ser du en unik applikation av en "lightbox" som en effekt som anger deras webbplatser och ikoner. För det andra, om du klickar på några navigeringslänkar kommer du märka att det inte finns någon uppdatering, men att den nya sidan bara glider in från höger. Coola saker!
Besök sida
En annan "två för en" special, Bright Creative använder en extremt subtil glödseffekt i sin navigering som är väldigt lugnande och varm. Dessutom har alla sina portföljsidor en tabbing effekt, så det är inte nödvändigt för användaren att uppdatera sidan varje gång - tack vare AJAX och jQuery.
Besök sida
Inte för länge sedan skrev Connor Zwick oss en bra handledning som visar exakt hur man bygger en fantastisk drop-down inloggningsblankett.
Besök sida
Det skulle vara en förolämpning att kalla detta en typ av "tavla" (shivers utter det ordet). Istället kom Aviary upp med en mycket snygg och fungerande "scroller" för att visa upp mycket text i en liten mängd utrymme. Ännu bättre är att scroller kommer att försämras graciöst är javascript inaktiverat.
Besök sida
DesignFlavr, känd för sina stora källor till designinspiration, sätter ihop ett enkelt fadeIn / fadeOut-skript för att visa upp deras presenterade konstverk och motsvarande beskrivningar. De har också använt lavalamp-plugin ganska bra på deras huvudnavigering.
Besök sida
På Hv-Designs hemsida kommer du att märka att RSS-ikonen börjar som en skiss / skiss av den aktuella bilden. Då, då svävas, lyser rss-ikonerna på plats.
Besök sida
Förutom att vara en helt hilarisk hemsida har Asylum sina egna söta "featured articles" scrolling script. Det är svårt att lägga på ett finger på varför den här är så fin, men det är nog för att den beter sig lite annorlunda än de flesta rullningsskript. Det verkar nästan snäppa på plats efter att du klickat på det.
Besök sida
Brian Reindel skapade en webbsida med 5 anpassade skript som du kan använda men du vill. Artikeln tar idéer och tidigare javascript-tekniker som ofta används och använder jQuery för att göra dem kraftfulla, kompakta och lättlästa.
Besök sida
Coda är känt för sin fantastiska användargränssnitt och webbdesign. Det sätter en brand under jQuery plugin community genom att inspirera många utvecklare att skapa sin sida tabbing effekt. Dessutom har de en underbar svängningseffekt på länkarna i rubriken.
Besök sida
ClarkLab är en välkänd och mycket framgångsrik författare på ThemeForest. Om du besöker hans portfölj nedan kommer du att märka att de stora rubrikbilderna slutligen bleknade till nästa och presenterade alla hans senaste jobb. Fade-effekten är så bra gjort och subtil, du märker knappt den nya bilden som dyker upp.
Besök sida
Designer och konstdirektör Rob Young använde en unik idé att visa sitt konstverk på en simulerad Mac-skärm. Sedan använder du jQuery-rullningseffekter, varje ny sida glider in i sidvisningen som om den laddas på en dator.
Besök sida
Förutom att vara en visuellt fantastisk webbplats har WDW några unika anpassade jQuery-skript för att lägga till klasser till vissa element på svävaren. Kolla in effekterna när rss- och navigeringsobjekten svängs över.
Besök sida
En annan riktigt cool tabbing-effekt - istället för pilar används pagination och AJAX för att skapa en elegant och ren användarupplevelse. Dessutom har navigeringen en mycket bra, men enkel effekt.
Besök sida
Jag har sparat min absoluta favoritplats för sist. Först titta bara på den designen, det är underbart unikt och tröstande. Med hjälp av ett av de mest kreativa jQuery-skript som jag någonsin har sett har KM en "löv-o-meter" -reglaget, där glider det antingen ökar eller minskar lövverket och utformningen av temat, beroende på vilken riktning skjutreglaget flyttas. För ett påskägg ska du kolla källkoden!
Besök sida
Tänk på att jQuery helt enkelt är ett verktyg och begränsas endast av din kreativitet och kompetensnivå. Få unika med dina mönster och utvecklingsprocess och du kan bli förvånad över att se bra resultat uppstå. Var noga med att dela med dig av dina favoritwebbplatser med unika användningsområden av jQuery i kommentarfältet nedan! ... Och en Digg eller Stumble skulle uppskattas! :)
Accentsconagua