24 Klare webdesign som kombinerer JQuery og Illustrasjon
Takket være muligheten til JavaScript gjelder ordene "dynamisk" og "illustrasjon" ikke lenger utelukkende til Flash-baserte nettsteder.
Nå som dynamisk HTML er en realitet i de mest brukte nettleserne, og at mange fancy JavaScript-biblioteker eksisterer for å gjøre det enklere, kan CSS-nettsteder ta tilbake noen av gatekretsen som holdes så tett av Flash.
Av disse nye JavaScript-bibliotekene har jQuery blitt en av de mest adopterte på grunn av brukervennlighet, bredde av funksjoner og innledende fokus på visuell unikhet.
Her er 24 klare eksempler på webdesign med jQuery og Illustrasjon .
1.Form femtifem
Funksjoner: Endre topptekstillustrasjon; flere små lysbildeserievinduer.
Beskrivelse: Dette nettstedet har ikke bare et veldig bra designrelatert innhold, men jQuery brukes på flere måter for å forbedre nettstedets utseende og brukervennlighet. Legg til i en periodisk endret illustrert bakgrunn og noen fine sirkulære grensesnittkontroller, og du har et vakkert ekteskap med jQuery og illustrasjon.
Hjemmeside med topptekst: 
Venstre kolonne med koder slått på: 
Window shade header for logging in: 
2. Frozn
Funksjoner: Vertikal og horisontal glidning.
Beskrivelse: Annet enn de store, fargerike sirkler med tall, den funksjonen jeg la merke til mest, var de illustrerte profilbildene. Så jeg klikket på dem. Det var da magien skjedde: vertikal og horisontal vindusvisning som åpnet et komplett sett med bloggoppføringer med innebygde Vimeo-videoer. Den vedvarende bunngraden er en interessant effekt når du ruller nedover.
Store sirkler og forfatterillustrasjoner på hjemmesiden: 
Vertikalt ekspanderende innhold: 
Forfatterillustrasjoner utvides for å avsløre blogginnlegg og video: 
3. iPhone Mockup
Funksjoner: Dra og slipp, målretting
Beskrivelse: Hvis du noen gang har tenkt på å lage en app for iPhone (og hvilken webutvikler har ikke?), Kan dette være et nettsted for å sjekke ut. Den lar deg dra og slippe skisserte eller datategnede grensesnittelementer på en skissert eller datamaskin-tegnet iPhone-oversikt. Selv om det er ganske nakne bein i design, er det en nyskapende bruk av illustrasjon som bare kunne ha blitt trukket av tidligere med Flash.
Computer-tegnet iPhone editor: 
Sketched iPhone editor: 
4. Florida blomstre
Funksjoner: Mouseovers med gjennomsiktighet, lysbildefremvisning
Beskrivelse: De flotte farger og detaljer av det illustrerte treet på denne splash-siden er umiddelbare oppmerksomhetsgrabbers. Klikk på en av kategoriene som forgrener seg fra treet, og du får ikke bare beskrivende jQuery-drevet innhold, men også et helt annet tre. Rull ned og du vil se en fin, sentrert lysbildefremvisning og en bunntekst som tar det naturlige motivet under jorden.
Full visning av hjemmesiden, med stort tre, lysbildefremvisning og bunntekst: 
"Brukbarhet" tre: 
"Fleksibilitet" tre: 
5. Tea Round App
Funksjoner: Slideshow, mindre animasjon, skyveobjekter
Beskrivelse: Kanskje det er meg eller et tegn på at Apple har strålende designere, men jeg liker nettsteder som har beskåret iPhone-bilder. Denne nettsiden har en animert, med en skjermdisplay på skjermen utløst av mousing over noen godt utformede knapper. Den avrundede Helvetica-typen passer godt sammen med utformingen av telefonen og knappene. Te-tema illustrasjoner på siden og i skjermbilder av appen knytter alt sammen.
Animasjoner innenfor iPhone-grafikken på siden: 
Popup-vinduet viser appens skjerm: 
En annen Tea Round-appskjerm som vises i iPhone-grafikken: 
6. Beste før
Funksjoner: Skjermposisjonering, navigasjonsanimasjon
Beskrivelse: Hvis nettsteder kan ta jQuery steroider, ville dette være Barry Bonds på nettet. Med alle dynamiske visuals kan dette nettstedet enkelt forveksles med en Flash-nettside. Etter nøye inspeksjon finner du imidlertid at siden ikke er Flash eller kompleks fra et programmeringssynspunkt. Men realiseringen at det ikke finnes et spor av Flash, vil forbli etset i psyken din.
Hjemmemenyen: 
Flere ting i krøllete braces: 
Undermeny og portefølje: 
animasjon
Å finne et nettsted design som DHTML ble valgt for å lage animasjonen er alltid en overraskelse. Det beste for meg er at jeg kan se den på min iPhone. Jeg er sikker på at det ikke er den viktigste grunnen til at designerne valgte å ignorere Flash og dets animasjonsvennlige verktøy. Jeg vet ikke hvor mye de stolte på jQuery å kode deres animasjoner, men de måtte ha hatt sadistiske tendenser av noe slag for å trekke den av.
7. Tori's Eye
Funksjoner: Origami fugler flyr horisontalt.
Beskrivelse: Hvem synes å bruke origami på en nettside? Og hvem tenker å bruke blå origamifugler til å representere tweets, i stedet for den standardblå illustrasjonen? Og hvem tenker å animere tweets? Svaret på disse spørsmålene er skaperne av Tori's Eye. Bygg et nettsted med noen av disse funksjonene, og du vil ha noe helt original. For disse skaperne var det ikke nok å ha alle disse funksjonene. De gjorde den mot-intuitive beslutningen om å gjøre all animasjonen uten Flash!
Origami Twitter fugler som flyr over et landskap: 
8. Vesker
Funksjoner: Slideshow og footer animasjon med en-farge ikoner.
Beskrivelse: Bruken av jQuery her er mest åpenbar når lysbildeserien utløses av et klikk i navigasjonsområdet. Den ekspansive hvite plassen, svartypen og matchende ikonillustrasjoner gir et flott nettsted. Men se og se, en animasjon i bunnteksten har ikke stoppet å jobbe siden din ankomst. Høyreklikk på de solide svarte animasjonene, og du vil oppdage hemmeligheten til nettstedets langvarige film: Sprites og DHTML.
Hjemmeside med mye hvitt mellomrom: 
Store ikoner spredt i hele lysbildeserieinnholdet: 
Footer animasjon kjører kontinuerlig, uansett hvor du er på nettstedet: 
9. Kidd 81
Funksjoner: Header animasjon reiser horisontalt.
Beskrivelse: De lyse, fargerike tegningene i vintertemaet tar øyeblikkelig oppmerksomhet og designen har kontinuitet hele veien ned til bunnteksten. Som noen av disse andre nettstedene som bruker jQuery til å animere objekter, virker de jevne bevegelsene ukjent fra Flash ved første øyekast. Glasur på kaken, skjønt, er den dragebare "Wow! Jeg kan ikke tro at du kan dra disse "ikonene.
Hjemmesidehoved animasjoner: 
En bunntekst med samme illustrert tema: 
Butikkdelen har samme karakter og farger: 
Vertikal rulling
Noen få JavaScript-verktøy kan utløse jevn rulling mellom deler av en side. jQuery er selvfølgelig mer enn i stand til å utføre denne effekten, og minst noen av nettstedene i denne delen tar den ruten. Dynamisk rulling er en fin effekt, men i kombinasjon med kreative og detaljerte illustrasjoner er funksjonen bare en del av det større bildet.
10. Tomas Pojeta
Funksjoner: Himmel, hav, under vann.
Beskrivelse: Som et par andre nettsteder i denne delen, vedtar Pojeta et motiv som går fra høy høyde til under overflaten. Øverst på nettstedet er det i verdensrommet, med sin svært detaljerte rakett og ape. Rull ned og du vil se romvesener og ballonger i den nedre atmosfæren. Lenger ned er et påskeøya-utseende stykke land midt i vannet, noe som fører til en undersjøisk utsikt med en ubåt. Hver illustrasjon passer, og overgangene er omtrent like sømløse som det blir.
Raket og ape i rommet: 
Påskeøya og toucan: 
Ubåt under vann: 
11. Morphix
Funksjoner: Space, sky, land, underground.
Beskrivelse: Morphix begynner også med noen øvre atmosfæriske tiltak, men overgår til land istedet for sjø, og avsluttes med en underjordisk nedskjæring. Stilen er åpenbart annerledes, men illustrasjonen for hvert lag spenner over bredden på siden, som den siste, og skaper en følelse av horisont. Og igjen, overgangen fra himmel til underjordiske flyter jevnt, spesielt med dynamisk rulling.
Øvre atmosfære, med portefølje: 
Bakkenivå, med kyr og skyskrapere: 
Underjordisk, med trerøtter og grunnhøvel: 
12. GANDRWeb
Funksjoner: Ulike infographics.
Beskrivelse: I motsetning til de to foregående nettstedene, bruker denne infographics i stedet for tegn, landskaper og bakgrunner. Hver del av siden forklarer den medfølgende grafikken. På bunnen av siden er det overraskende et stort webskjema. En rent salgsrelatert nettside som bruker så mye god illustrasjon, er sjelden. De jQuery-utløste overgangene legger til glans til meldingen.
Infographic forklarer fordeler og priser: 
Infographic forklarer designprosessen: 
Nettskjema: 
13. Orman Clark
Funksjoner: Skyer, bakken og flygende objekter
Beskrivelse: Som de to første nettstedene i denne delen begynner Orman Clarks nettside med himmel, men den høye siden stikker med skyhimmelen helt til foten, der vi treffer bakken. En merkbar forskjell mellom denne siden og de fleste andre i denne artikkelen er den faste posisjonen til hovednavigasjonen og illustrasjonen. Dette fremheves av stjernen på toppen av bakgrunnen som fremhever flytende egg. Nettstedet har også en godt integrert jQuery lysbildeserie for porteføljen.
Ballong, ku og egg: 
Biplane og jQuery portefølje lysbildefremvisning: 
Nettskjema, bunntekst og fast navigering: 
14. Dreamerlines
Funksjoner: Ulike collager.
Beskrivelse: Dreamerlines nettstedet tar en diskret tilnærming. Som GANDRweb har hver seksjon en tydelig grafikk som er bundet til sine nærliggende seksjoner bare av hvitt mellomrom. Hver seksjon er imidlertid unik, detaljert, fargerik og oppmerksomhetsfargende. Sterke illustrasjoner, stor fet tekst og bakgrunnsfarger angir tonen.
Stor tekst å begynne: 
In-your-face collage: 
Nettskjema omgitt av mange bilder: 
15. Sosiale Snack
Funksjoner: Wire, fugler og bakken.
Beskrivelse: Himmelmotivet blir aldri gammelt, og designere kan velge mellom et hvilket som helst antall paletter for å farge deres horisont. Social Snacks horisont er litt uklar, med en uttalt grønn og brun. Fugler sitter på ledninger som er spredt vertikalt over hele siden for å skille deler. Nettstedet er ferdig med et tak på taket. Selv om bloggen ikke har jevn jQuery-rulling, fortjener den morsomme illustrert overskriften med søte tegn.
Fargepaletten og fuglmotivet øverst: 
Rammer for teamfotoene avhenger av en fugletråd: 
Søte tegn i bloggdelen: 
lysbilde~~POS=TRUNC
En av de mest hyppige og gjenkjennelige bruken av jQuery er for den ærverdige lysbildeserien. Når du ser innhold som glir over skjermen etter et museklikk, og ingen Flash kan bli funnet, er det sannsynligvis jQuery. Du vil finne lysbildefremvisninger på bedriftens nettsteder, destinasjonssider, byråporteføljer, e-handelswebsteder, overalt. De er det allestedsnærværende. Nedenfor er noen eksempler på lysbildefremvisninger som blir levende på grunn av skarpe illustrasjoner.
16. GoSiteWave
Funksjoner: Vertikal lysbildefremvisning med horisontal navigering og attraktive ikoner.
Beskrivelse: Den vertikalt rullende lysbildeserien, kombinert med ikonene og bildene, er den virkelige historien her. Lysbildefremvisninger forventes å rulle horisontalt, så det motsatte her er iøynefallende. De lyse blues og appelsiner, glatte avrundede knapper og mørk bakgrunn med dyktige belagte lysstråler legger til effekten. Selvfølgelig, hvis ikonene ikke var så godt utført, har nettstedet kanskje ikke gjort kuttet.
Hjemmeside lysbildevisning: 
En annen lysbildefremvisning: 
17. Sketchen
Funksjoner: Horisontal lysbildefremvisning av Flash-filmer, med forhåndsinnstilt innhold, stor tekst og illustrasjoner.
Beskrivelse: Hvis du liker gult, vil du elske denne nettsiden. Denne lysbildeserien har store beskjære illustrasjoner som holder den gule bakgrunnen intakt. En ekstra lysbildefremvisning i popup-lysboksen inneholder porteføljen. Nevnte jeg at illustrasjonene var store? De tar opp mye plass, men de er veldig bra gjort. Bakgrunnsfargen og bildene er aksentert av de grønne og hvite navigasjonselementene, og den skarpe kontrast sikrer at brukervennlighet ikke er et problem.
megafon: 
Hvit bunntekst: 
Eple: 
Portefølje i "lightbox": 
18. Form femtifem
Funksjoner: Glatt vertikal rulling, dynamisk generert blogginnhold, lysbildefremvisning, hovednavigering,
Beskrivelse: Ikke la den monokrome fargepaletten og de enkle linjetegningene lure deg. Dette byrået har alt. Glatt vertikal rulling, en fast bunntekst som overlegger innhold, en porteføljens lysbildefremvisning, dynamisk innebygd blogginnhold, etc. Med alle disse funksjonene som går for det, er det som virkelig setter siden fra hverandre det totale antall tilfeldige illustrasjoner, og det faktum at de ' er alle ganske morsomme. Langs disse linjene er et besøk på nettstedet ikke komplett uten å prøve den morsomme "Om" -videoen.
Mange illustrasjoner i startskjermen
Skrifter samsvarer med illustrasjonsstilen
Portefølje lysbildefremvisning
Footer navigeringstitler markerer mens du ruller
Horisontal rulling
I motsetning til lysbildeserien, som vanligvis er begrenset til en del av et nettsted, skjer horisontal rulling (som definert her) på nettlesernivå, eller i det minste føles den måten. Dynamisk horisontal rulling har ikke så mange gode eksempler som vertikal rulling; men som du vil se, designere som tenker horisontalt har flotte fantasier.
19. Serial Cut
Funksjoner: Store illustrasjoner for portefølje; horisontal og vertikal rulling.
Beskrivelse: Denne lysbildeserien er virkelig designet for å ta opp leserens visningsområde. Du kan ikke bla til venstre eller høyre, men spiller det noe? Illustrasjonene og designen er så enestående at utvikleren kunne ha hatt kryssover, opp-ned eller en hvilken som helst annen unintuitiv metode for navigering, og folk vil fortsatt bruke innsatsen for å finne ut hva som kommer neste gang. Det som virkelig hjelper, er størrelsen på navigasjonsikonet, og at porteføljens bilder og bilder tar opp hele skjermen.
tog: 
CD-omslag: 
3-D mann med sko: 
20. Tyler Finck
Funksjoner: Horisontale overganger, med animasjoner opprettet ut av bakgrunnen.
Beskrivelse: Her er et godt eksempel på å bruke bakgrunnsbildet for å lage en animasjonseffekt for den dynamiske horisontale rullingen. Fargepaletten er først og fremst svart og hvitt. Skriftene er dristige og har tykke blokkerte bakgrunner på enkelte steder, og den bildebaserte typen har et sketchy utseende. Den komplette pakken fungerer bra.
En minimalistisk hjemmeside: 
Bio: 
Pengeskuddene: 
Annen funksjonalitet
Noen nettsteder som bruker jQuery er ikke lett kategoriserbare. De kan ha uvanlige funksjoner eller gjøre subtil bruk av jQuery eller tilpasse en vanlig teknikk på en uvanlig måte. Forhåndsinnlasting, automatisk tekstgjennomføring, fading inn og ut og lagring av tekst over bilder er noen av triksene som finnes i det siste settet av nettsteder i denne samlingen.
21. Oransje Etikett
Funksjoner: Bilde forhåndsinnlasting.
Beskrivelse: Bilde forhåndsinnlasting er omfanget av Orange Labels bruk av jQuery. Når du ruller ned, legges porteføljeposter til siden (med roterende grafikk som forteller deg at de er forhåndsinnlasting). Fra et brukbarhetssynspunkt holder denne praktiske funksjonen siden fra automatisk lasting av båndbreddehøyd innhold. Illustrasjonen på toppen er stor, fargerik, svært detaljert og deilig øye-godteri.
Illustrasjonen: 
Illustrasjon zoomet inn: 
Porteføljepost og bunntekst: 
22. Silk Icon Finder
Funksjoner: Tekstgjennomføring.
Beskrivelse: Skriv inn navnet på et ikon, og dette nettstedet sorterer dets ikoner basert på mulige resultater av hva du har skrevet så langt. Kvaliteten på ikonene er ganske bra, og tjenesten er ganske praktisk i det hele tatt. Fordi designet egentlig handler om søkeresultater, har det lite i vei for visuell distraksjon, noe som er et stort pluss.
Standardvisning: 
Søkeresultater for "light": 
23. Vyniknite
Funksjoner: Fades.
Beskrivelse: Dette nettstedet begynner med en flott løvetannsillustrasjon, god layout og fint utvalg av skrifttyper. Den eneste merkbare jQuery-handlingen som skjer, er fading og ut som skjer når du navigerer på fanene. En annen liten bit av himmelen er måten som løvetannsstammen overlapper, både de aktive og inaktive fanene. Og hvis du ser nøye på bakgrunnen, ser du noen forseggjorte vindvirvler som følger med flytende fauna.
Løvetann i massevis: 
24. Halo Agency
Funksjoner: Automatisk lysbildefremvisning med bakgrunns illustrasjon; tekst over bilder.
Beskrivelse: Bakgrunner, bakgrunner, bakgrunner. Naviger gjennom denne nettsiden, og du finner en rekke dekorative som er fulle av fargerike 3-D-illustrasjoner. En imponerende portefølje kan nås gjennom en jQuery lysbildeserie på hjemmesiden. Alternativt kan du finne informasjon om hvert element i porteføljen (eller "arbeid") fra tekstoverlegget på miniatyrbildet.
Hjemmeside med lysbildefremvisning: 
Porteføljen overlegger tekst på bilder: 
En annen fargerik bakgrunn: 
Skrevet utelukkende for WDD av Maurice Wright. Han er en webutvikler og designer og skaperen av Moluv.com . Siden 2000 har Moluv vært en kilde til designinspirasjon for kreative sinn som ser etter de beste nettstedene på Internett.
Hvordan har jQuery endret måten du designer nettsteder på? Vennligst kommenter under ...