24 Snygga webbdesigner som kombinerar JQuery och Illustration
Tack vare JavaScript kan orden "dynamisk" och "illustration" inte längre tillämpas exklusivt på Flash-baserade webbplatser.
Nu när dynamisk HTML är en verklighet i de flesta vanliga webbläsare och att det finns många fina JavaScript-bibliotek för att göra det enkelt, kan CSS-webbplatser ta tillbaka en del av gatukretsen som hålls så tätt av Flash.
Av dessa nya JavaScript-bibliotek har jQuery blivit en av de mest antagna på grund av användarvänlighet, bredd av funktioner och inledande fokus på visuell unikhet.
Här är 24 kloka exempel på webbdesign med jQuery och Illustration .
1.Form femtiofem
Funktioner: Ändra rubrikillustrationen; flera små bildspel fönster.
Beskrivning: Den här webbplatsen har inte bara ett mycket bra designrelaterat innehåll, men jQuery används på olika sätt för att förbättra webbplatsens utseende och användbarhet. Lägg till i en periodiskt förändrad illustrerad bakgrund och några fina cirkulära gränssnittskontroller och du har ett vackert äktenskap med jQuery och illustration.
Hemsida med rubrikillustration: 
Vänster kolumn med taggar växlade på: 
Fönsterskärmhuvud för att logga in: 
2. Frozn
Funktioner: Vertikal och horisontell glidning.
Beskrivning: Annat än de stora, ljusa cirklarna med siffror, den funktion jag märkte mest var de illustrerade profilbilderna. Så jag klickade på dem. Det var då magiken hände: vertikal och horisontell fönsterskärning som öppnade en komplett uppsättning blogginlägg med inbäddade Vimeo-videor. Den vidhäftande footer-gradienten är en intressant effekt när du rullar ner.
Stora cirklar och författarillustrationer på hemsidan: 
Vertikalt expanderande innehåll: 
Författarillustrationer expanderar för att avslöja blogginlägg och video: 
3. iPhone Mockup
Funktioner: Dra och släpp, inriktning
Beskrivning: Om du någonsin har tänkt på att skapa en app för iPhone (och vilken webbutvecklare har inte?), Så kan det här vara en webbplats att kolla in. Det låter dig dra och släppa skisserade eller datordragen gränssnittselement på en skisserad eller datorritad iPhone-skiss. Även om det är ganska nakna ben i design, är det en innovativ användning av illustration som bara kunde ha dras av tidigare med Flash.
Datorritad iPhone-editor: 
Sketched iPhone redaktör: 
4. Florida Blomstra
Funktioner: Mouseovers med transparens, bildspel
Beskrivning: De lysande färgerna och detaljerna i det illustrerade trädet på denna stänk sida är omedelbara uppmärksamhet-grabbers. Klicka på någon av de kategorier som förgrenar sig från trädet och du får inte bara beskrivande jQuery-driven innehåll utan också ett helt annat träd. Bläddra ner och du får se ett fint centrerat bildspel och en footer som tar det naturliga motivet under jorden.
Full bild av hemsidan, med stort träd, bildspel och sidfot: 
"Användbarhet" träd: 
"Flexibilitet" träd: 
5. Tea Round App
Funktioner: Bildspel, mindre animering, glidande objekt
Beskrivning: Kanske är det mig eller ett tecken på att Apple har briljanta designers, men jag gillar webbplatser som har skurit iPhone-bilder. Den här webbplatsen har en animerad bild, med ett bildspel på skärmen som utlöses av musen över några välgjorda knappar. Den avrundade Helvetica-typen passar bra med telefonens och knapparnas design. Te-themed illustrationerna på sidan och i skärmdumparna av appen knyter samman allt.
Animationer inom iPhone grafik på sidan: 
Popup-fönster visar appens skärm: 
En annan Tea Round app skärm som visas i iPhone grafiken: 
6. Bäst före
Funktioner: Skärmpositionering, navigationsanimering
Beskrivning: Om webbplatser skulle kunna ta jQuery-steroider skulle detta vara Barry Bonds på webben. Med alla dynamiska bilder kan denna webbplats enkelt misstas på en Flash-webbplats. Efter noggrann inspektion finner du dock att sidan varken är Flash eller komplex från en programmeringssynpunkt. Men insikten att det inte finns något spår av Flash kommer att förbli etsat i din psyke.
Hemmenyn: 
Fler saker i lockiga axlar: 
Undermeny och portfölj: 
Animation
Att hitta en webbdesign där DHTML valdes för att skapa animationen är alltid en överraskning. Det bästa för mig är att jag kan se den på min iPhone. Jag är säker på att det inte är den främsta anledningen till att konstruktörerna valde att ignorera Flash och dess animationsvänliga verktyg. Jag vet inte hur mycket de förlitade sig på jQuery för att koda deras animeringar, men de måste ha haft sadistiska tendenser av något slag för att dra av det.
7. Tori ögat
Funktioner: Origami fåglar flyger horisontellt.
Beskrivning: Vem tänker använda origami på en webbsida? Och vem tror att använda blå origami fåglar för att representera tweets, snarare än den vanliga blå illustrationen? Och vem tycker att animera tweets? Svaret på dessa frågor är skaparna av Tori's Eye. Bygg en webbplats med någon av dessa funktioner och du skulle ha något helt original. För dessa skapare var det inte tillräckligt med alla dessa funktioner. De gjorde det mot-intuitiva beslutet att göra all animering utan Flash!
Origami Twitter fåglar som flyger över ett landskap: 
8. Väskor
Funktioner: Bildspel och sidfot animering med enfärgade ikoner.
Beskrivning: Användningen av jQuery här är uppenbart när bildspelet utlöses av ett klick i navigeringsområdet. Det expansiva vita utrymmet, svartypen och matchande ikonillustrationer ger en snygg webbplats. Men se och se, en animering i sidfoten har inte slutat fungera sedan din ankomst. Högerklicka på de soliga svarta animationerna och du kommer att upptäcka hemligheten på webbplatsens långfilm: Sprites och DHTML.
Hemsida med mycket vitt utrymme: 
Stora ikoner spridda över hela bildspelet innehåll: 
Footer-animering körs kontinuerligt, oavsett var du befinner dig på webbplatsen: 
9. Kidd 81
Funktioner: Header animation reser horisontellt.
Beskrivning: De ljuskalibrerade vintertematritningarna här fångar din uppmärksamhet omedelbart, och designen har kontinuitet hela vägen ner till sidfoten. Liksom några av dessa andra webbplatser som använder jQuery för att animera objekt, verkar de smidiga bilderna ostörbara från Flash vid första anblicken. Glasyren på kakan är dock den draggbara "Wow! Jag kan inte tro att du kan dra dessa "ikoner.
Hemsidans huvudanimeringar: 
En sidfot med samma illustrerade tema: 
Butikssektionen har samma karaktär och färger: 
Vertikal rullning
Några JavaScript-verktyg kan utlösa smidig rullning mellan sektioner på en sida. jQuery är naturligtvis mer än kapabel att utföra denna effekt, och åtminstone några av webbplatserna i den här sektionen tar den vägen. Dynamisk rullning är en bra effekt, men i kombination med kreativa och detaljerade illustrationer är funktionen bara en del av den större bilden.
10. Tomas Pojeta
Funktioner: Himmel, hav, under vatten.
Beskrivning: Liksom några andra webbplatser i det här avsnittet antar Pojeta ett motiv som går från hög höjd till under ytan. Överst på webbplatsen finns i yttre rymden med sin mycket detaljerade raket och apa. Bläddra ner och du kommer se utlänningar och ballonger i den lägre atmosfären. Längre ner är en påskönlig mark i mitten av vattnet, vilket leder till en undervattensvy med en ubåt. Varje illustration passar, och övergångarna är ungefär lika sömlösa som det blir.
Raket och apa i rymden: 
Påskön och toucan: 
Ubåt under vattnet: 
11. Morphix
Funktioner: Utrymme, himmel, mark, tunnelbana.
Beskrivning: Morphix börjar också med viss övre atmosfäriska verkan, men övergår sedan till land i stället för havet, och slutar med en underjordisk nedbrytning. Stilen är uppenbarligen annorlunda, men illustrationen för varje lager sträcker sig bredden på sidan, som den sista, vilket skapar en känsla av horisont. Och igen, övergången från himmel till tunnelbana strömmar smidigt, särskilt med den dynamiska rullningen.
Övre atmosfär, med portfölj: 
Marknivå, med kor och skyskrapor: 
Underjordisk, med trädrötter och grundhögg: 
12. GANDRWeb
Funktioner: Olika infographics.
Beskrivning: Till skillnad från de tidigare två webbplatserna använder den en infografik i stället för tecken, landskap och bakgrunder. Varje avsnitt på sidan förklarar den medföljande grafiken. Nedre delen av sidan har, överraskande, en stor webbformulär. En rent försäljningsrelaterad webbplats som använder så mycket bra illustration är sällsynt. De jQuery-utlösande övergångarna lägger till glans till meddelandet.
Infographic förklarar fördelar och prissättning: 
Infographic förklarar designprocessen: 
Webbformulär: 
13. Orman Clark
Funktioner: Moln, mark och flygande föremål
Beskrivning: Liksom de två första hemsidorna i detta avsnitt börjar Orman Clarks hemsida med himmel, men den långa sidan pinnar med molnhimmel hela vägen till sidfoten, där vi träffar marken. En märkbar skillnad mellan den här sidan och de flesta andra i den här artikeln är den fasta positionen för huvudnavigeringen och illustrationen. Detta accentueras av starburst på toppen av bakgrunden som lyfter fram flytande ägg. Webbplatsen har också ett välintegrerat jQuery bildspel för portföljen.
Ballong, ko och ägg: 
Biplane och jQuery portfölj bildspel: 
Webbformulär, sidfot och fast navigering: 
14. Dreamerlines
Egenskaper: Olika collage.
Beskrivning: Dreamerlines webbplats tar ett diskret tillvägagångssätt. Liksom GANDRweb har varje sektion en distinkt grafik som är bunden till dess närliggande sektioner endast med vitt utrymme. Varje avsnitt är dock unik, detaljerad, färgstark och uppmärksamhetsfull. Tunga illustrationer, stor fet text och bakgrundsfärg ställer in tonen.
Stor text att börja: 
In-your-face collage: 
Webblankett omgivet av många bilder: 
15. Social Snack
Funktioner: Wire, fåglar och mark.
Beskrivning: Himlen motiv blir aldrig gammal, och designers kan välja mellan valfritt antal paletter för att färga deras horisont. Social Snacks horisont är lite dimmig, med en uttalad grön och brun. Fåglar sitter på ledningar som är spridda vertikalt i hela sidan för att separera sektioner. Webbplatsen avslutas med ett tak på taket. Även om bloggen inte har jämn jQuery-rullning, förtjänar den roliga illustrerade rubriken med söta tecken att nämna.
Färgpaletten och fågelmotivet på toppen: 
Ramarna för lagfotona hänger av en fågelgänga: 
Söttecken i bloggdelen: 
Bildspel
En av de mest frekventa och igenkännliga användningarna av jQuery är för det ärafulla bildspelet. När du ser innehållet glider över skärmen efter ett musklick, och ingen Flash kan hittas, är det förmodligen jQuery. Du hittar bildspel på företagswebbplatser, målsidor, byråportföljer, e-handelswebbplatser, överallt. De är så allestädes närvarande. Nedan följer några exempel på bildspel som kommer att leva på grund av skarpa illustrationer.
16. GoSiteWave
Funktioner: Vertikal bildspel med horisontell navigering och attraktiva ikoner.
Beskrivning: Den vertikalt rullande bildspelet, i kombination med ikonerna och bilderna, är den verkliga historien här. Bildspel förväntas rulla horisontellt, så motsatsen här är iögonfallande. De ljusa bluesna och apelsinerna, smala avrundade knappar och mörk bakgrund med skickligt placerade ljusstrålar lägger till effekten. Självklart, om ikonerna inte var så bra gjort, kanske webbplatsen inte har gjort snittet.
Startsidans bilddiagram: 
Ett annat bildspel: 
17. Sketchen
Funktioner: Horisontellt bildspel av Flash-filmer, med förinstallerat innehåll, stor text och illustrationer.
Beskrivning: Om du gillar gult, kommer du att älska den här webbplatsen. Detta bildspel innehåller stora beskurna illustrationer som håller den gula bakgrunden intakt. Ett extra bildspel i popup-lådan innehåller portföljen. Nämnde jag att illustrationerna var stora? De tar upp mycket utrymme, men de är mycket bra gjort. Bakgrundsfärgen och bilderna accentueras av de gröna och vita navigeringselementen, och den skarpa kontrasten säkerställer att användbarheten inte är oroande.
Megafon: 
Vit sidfot: 
Äpple: 
Portfölj i "lightbox": 
18. Form femtiofem
Funktioner: Lätt vertikal rullning, dynamiskt genererat blogginnehåll, bildspel, huvudnavigering,
Beskrivning: Låt inte monokrom färgpalett och de enkla linjeteckningarna lura dig. Denna byrå webbplats har allt. Smidig vertikal rullning, en fast fotboll som överlägger innehåll, ett bildspel med bildspel, dynamiskt inbäddad blogginnehåll etc. Med alla dessa funktioner går det, det som verkligen ställer platsen är det totala antalet slumpmässiga illustrationer och det faktum att de " är allt ganska roligt. Längs dessa linjer är ett besök på webbplatsen inte komplett utan att prova den hilariska "Om" -videoen.
Massor av illustrationer i startskärmen
Typsnitt matchar illustrationstilen
Portfölj bildspel
Footer navigeringstitlar markerar när du bläddrar
Horisontell rullning
Till skillnad från bildspelet, som vanligtvis begränsas till en sektion av en webbplats, sker horisontell rullning (som definierad här) på webbläsernivå eller känns åtminstone åtminstone. Dynamisk horisontell rullning har inte så många bra exempel som vertikal rullning; men som du ser ser designers som tänker horisontellt på stora fantasier.
19. Serial Cut
Funktioner: Stora illustrationer för portfölj; horisontell och vertikal rullning.
Beskrivning: Detta bildspel är verkligen utformat för att ta upp webbläsarens visningsområde. Du kan inte bläddra åt vänster eller höger, men spelar det ingen roll Illustrationerna och designen är så enastående att utvecklaren kunde ha haft kors-tvärsätt, upp och ner eller någon annan ointuitiv navigationsmetod och människor skulle fortfarande spendera ansträngningarna för att finna ut vad som kommer framåt. Det som verkligen hjälper är storleken på navigationsikonen och att portföljen och bilderna tar upp hela skärmen.
tåg: 
CD-omslag: 
3-D kille med skor: 
20. Tyler Finck
Funktioner: Horisontella övergångar, med animeringar skapade ur bakgrunden.
Beskrivning: Här är ett utmärkt exempel på att använda bakgrundsbilden för att skapa en animeringseffekt för dynamisk horisontell rullning. Färgpaletten är främst svartvitt. Teckensnitt är fet och har tjocka blockiga bakgrunder på vissa ställen, och den bildbaserade typen har en sketchy look. Det kompletta paketet fungerar bra.
En minimalistisk hemsida: 
Bio: 
Pengarna sköt: 
Annan funktionalitet
Vissa webbplatser som använder jQuery är inte lätt kategoriserbara. De kan ha ovanliga funktioner eller göra subtil användning av jQuery eller anpassa en vanlig teknik på ett ovanligt sätt. Förladdning, automatisk textuppfyllning, blekning in och ut och lagring av text över bilder är några av de knep som hittades i den slutliga uppsättningen webbplatser i denna samling.
21. Orange etikett
Funktioner: Förhandsgranskning av bilder.
Beskrivning: Förhandsgranskning är omfattningen av Orange Labels användning av jQuery. När du rullar ner läggs portföljen på sidan (med en roterande grafik som berättar att de är förladdade). Från en användbarhetssynpunkt håller den här funktionen bort sidan från att automatiskt ladda upp bandbreddskrypande innehåll. Illustrationen på toppen är stor, färgstark, mycket detaljerad och utsökt ögon godis.
Illustrationen: 
Illustration zoomat in: 
Portföljartikel och sidfot: 
22. Silk Icon Finder
Funktioner: Textavslutning.
Beskrivning: Ange namnet på en ikon, och denna webbplats sorterar dess ikoner baserat på möjliga resultat av vad du har skrivit hittills. Kvaliteten på ikoner är ganska bra, och tjänsten är ganska bekväm på det hela taget. Eftersom designen verkligen handlar om sökresultat, har den lite i vägen för visuell distraktion, vilket är ett stort plus.
Standardläget: 
Sökresultat för "light": 
23. Vyniknite
Funktioner: Fades.
Beskrivning: Den här webbplatsen börjar med en stor maskros illustration, bra layout och fint urval av teckensnitt. Den enda märkbara jQuery-åtgärden som händer är att blekna och ut det som händer när du navigerar på flikarna. En annan liten bit av himlen är hur maskrosstammarna överlappar både de aktiva och inaktiva flikarna. Och om du tittar noggrant på bakgrunden ser du några utarbetade vindvarv som följer med den flytande faunan.
Maskrosor i stort: 
24. Halo Agency
Funktioner: Automatisk bildspel med bakgrunds illustration; text över bilder.
Beskrivning: Bakgrunder, bakgrunder, bakgrunder. Navigera genom denna webbplats och du hittar en mängd olika dekorativa som är fulla av färgglada 3-D-illustrationer. En imponerande portfölj kan nås via ett jQuery bildspel på hemsidan. Alternativt kan du hitta information om varje objekt i portföljen (eller "arbete") av textöverlägget på miniatyren.
Hemsida med bildspel: 
Portföljen överlappar text på bilder: 
En annan färgstark bakgrund: 
Skriven uteslutande för WDD av Maurice Wright. Han är webbutvecklare och designer och skapare av Moluv.com . Sedan 2000 har Moluv varit en källa till designinspiration för kreativa sinnen som letar efter de snyggaste webbplatser på Internet.
Hur har jQuery förändrat hur du utformar dina webbplatser? Vänligen kommentera nedan ...