24 Smarte Website Designs, der kombinerer JQuery og Illustration
Takket være muligheden for JavaScript gælder ordene "dynamisk" og "illustration" ikke længere udelukkende på Flash-baserede websteder.
Nu, at dynamisk HTML er en realitet i de mest almindeligt anvendte browsere, og at der findes mange fancy JavaScript-biblioteker for at gøre det nemt at bruge, kan CSS-websteder tage tilbage nogle af gadekreditten, der holdes så tæt af Flash.
Af disse nye JavaScript-biblioteker er jQuery blevet en af de mest vedtagne på grund af dens brugervenlighed, bredde af funktioner og indledende fokus på visuel unikhed.
Her er 24 kloge eksempler på website designs ved hjælp af jQuery og Illustration .
1.Form femogtreds
Funktioner: Ændring af header illustration; flere små diasshow vinduer.
Beskrivelse: Denne hjemmeside har ikke kun et rigtigt godt designrelateret indhold, men jQuery bruges på mange forskellige måder til at forbedre hjemmesidenes udseende og brugervenlighed. Tilføj i en periodisk skiftende illustreret baggrund og nogle fine cirkulære interface-kontroller, og du har et smukt ægteskab af jQuery og illustration.
Hjemmeside med header illustration: 
Venstre kolonne med tags tændt på: 
Vindueskærmhoved for at logge ind: 
2. Frozn
Egenskaber: Vertikal og vandret glidning.
Beskrivelse: Bortset fra de store, farvede cirkler med tal, den funktion jeg bemærkede mest var de illustrerede profilbilleder. Så jeg har klikket på dem. Det var da magien skete: vertikal og vandret vindueskærmning, der åbnede et komplet sæt blog-indlæg med indlejrede Vimeo-videoer. Den vedvarende fodfodradient er en interessant effekt, når du ruller ned.
Store cirkler og forfatterillustrationer på hjemmesiden: 
Lodret ekspanderende indhold: 
Forfatterillustrationer udvides for at afsløre blogindlæg og video: 
3. iPhone Mockup
Funktioner: Træk og slip, målretning
Beskrivelse: Hvis du nogensinde har tænkt dig at oprette en app til iPhone (og hvilken webbudvikler har ikke?), Så kan det være et websted at tjekke ud. Det giver dig mulighed for at trække og slippe skitserede eller computer-drevne grænsefladeelementer på en skitseret eller computer-tegnet iPhone-oversigt. Selv om det er temmelig blotte knogler i design, er det en nyskabende brug af illustration, der kun kunne være trukket fra tidligere med Flash.
Computer-trukket iPhone editor: 
Sketched iPhone editor: 
4. Florida blomstre
Funktioner: Mouseovers med gennemsigtighed, diasshow
Beskrivelse: De strålende farver og detaljer af det illustrerede træ på denne splash side er øjeblikkelige opmærksomhedsgrabbers. Klik på en af de kategorier, der forgrener sig fra træet, og du får ikke kun beskrivende jQuery-drevet indhold, men også et helt andet træ. Rul ned, og du får se et godt centreret lysbilledshow og en footer, der tager det naturlige motiv under jorden.
Fuld visning af startside, med stort træ, diasshow og sidefod: 
"Brugbarhed" træ: 
"Fleksibilitet" træ: 
5. te runde app
Funktioner: Slideshow, mindre animation, glidende objekter
Beskrivelse: Måske er det mig eller et tegn på, at Apple har strålende designere, men jeg kan godt lide websteder, der har beskåret iPhone-fotos. Denne hjemmeside har en animeret, med et diasshow på skærmen, der udløses af mousing over nogle velegnede knapper. Den afrundede Helvetica-type passer godt sammen med telefonens og knappernes design. Te-tema illustrationer på siden og i screenshots af appen binde alt sammen.
Animationer inden for iPhone grafik på siden: 
Pop-up-vindue viser appens skærm: 
En anden te runde app skærm vist i iPhone grafik: 
6. Bedste før
Funktioner: Skærm positionering, navigation animation
Beskrivelse: Hvis hjemmesider kunne tage jQuery-steroider, ville dette være Barry Bonds på nettet. Med alle de dynamiske billeder kan denne hjemmeside let forveksles med et Flash-websted. Efter omhyggelig inspektion finder du dog, at siden ikke er Flash eller kompleks fra et programmeringssynspunkt. Men den erkendelse, at der ikke findes et spor af Flash, vil forblive ætset i din psyke.
Hjemmemenuen: 
Flere ting i krøllede beslag: 
Undermenu og portefølje: 
Animation
At finde et website design, som DHTML blev valgt til at skabe animationen er altid en overraskelse. Det bedste for mig er, at jeg kan se det på min iPhone. Jeg er sikker på, at det ikke er hovedårsagen til, at designerne valgte at ignorere Flash og dets animationsvenlige værktøjer. Jeg ved ikke, hvor meget de stolte på jQuery for at kode deres animationer, men de måtte have haft sadistiske tendenser af en eller anden art for at fjerne det.
7. Tori's Eye
Funktioner: Origami fugle flyver vandret.
Beskrivelse: Hvem mener at bruge origami på en webside? Og hvem mener at bruge blå origami fugle til at repræsentere tweets, snarere end den standard blå illustration? Og hvem mener at animere tweets? Svaret på disse spørgsmål er skaberne af Tori's Eye. Byg et websted med et af disse funktioner, og du vil have noget helt originalt. For disse skabere var det ikke nok at have alle disse funktioner. De gjorde den mod-intuitive beslutning om at gøre al animationen uden Flash!
Origami Twitter fugle flyver på tværs af et landskab: 
8. Tasker
Funktioner: Diasshow og footer-animation med ikoner med en farve.
Beskrivelse: Brugen af jQuery her er mest oplagt, når diasshowet udløses af et klik i navigationsområdet. Den ekspansive hvide plads, sort type og matchende ikonillustrationer giver mulighed for en smuk hjemmeside. Men se og se, en animation i footer er ikke stoppet med at fungere siden din ankomst. Højreklik på de solide sorte animationer, og du vil opdage hemmeligheden for hjemmesidenes langvarige film: Sprites og DHTML.
Hjemmeside med meget hvidt rum: 
Store ikoner spredt i hele diasshowets indhold: 
Footer animation kører kontinuerligt, uanset hvor du er på hjemmesiden: 
9. Kidd 81
Funktioner: Header animation rejser vandret.
Beskrivelse: De lystfarvede vintertemaegninger tegner her straks opmærksomheden, og designet har kontinuitet hele vejen ned til fodfoden. Ligesom nogle af disse andre hjemmesider, der bruger jQuery til at animere objekter, synes de glatte billeder ikke at skelnes fra Flash ved første øjekast. Glasurret på kagen er dog den trækbare "Wow! Jeg kan ikke tro, du kan trække disse "ikoner.
Startside header animationer: 
En footer med samme illustrerede tema: 
Butikssektionen har samme karakter og farver: 
Lodret rulning
Nogle JavaScript-værktøjer kan udløse glat rulning mellem sektioner på en side. jQuery er selvfølgelig mere end i stand til at udføre denne effekt, og i det mindste et par af hjemmesiderne i dette afsnit tager den rute. Dynamisk rulning er en god effekt, men kombineret med kreative og detaljerede illustrationer er funktionen kun en del af det større billede.
10. Tomas Pojeta
Funktioner: Himmel, hav, under vand.
Beskrivelse: Som et par andre hjemmesider i dette afsnit vedtager Pojeta et motiv, der går fra høj højde til under overfladen. Toppen af hjemmesiden er i det ydre rum med sin meget detaljerede raket og abe. Rul ned og du vil se udlændinge og balloner i den nederste atmosfære. Længere ned er et påskeøns stykke jord midt i vandet, hvilket fører til en undersøisk udsigt med en ubåd. Hver illustration passer, og overgange er omtrent lige så sømløse som det bliver.
Raket og abe i rummet: 
Påskeøen og toucan: 
Ubåt under vandet: 
11. Morphix
Funktioner: Rum, himmel, jord, underjordisk.
Beskrivelse: Morphix begynder også med nogle øvre atmosfæriske handlinger, men overgår derefter til at lande i stedet for havet og slutter med en underjordisk nedskæring. Stilen er naturligvis anderledes, men illustrationen for hvert lag spænder over bredden på siden, som den sidste, hvilket skaber en følelse af horisont. Og igen, overgangen fra himlen til undergrunden flyder jævnt, især med den dynamiske rullning.
Øvre atmosfære med portefølje: 
Jordoverfladen, med køer og skyskrabere: 
Underjordisk, med trærødder og grundhøj: 
12. GANDRWeb
Funktioner: Forskellige infographics.
Beskrivelse: I modsætning til de to foregående hjemmesider bruger denne infographics i stedet for tegn, landskaber og baggrunde. Hvert afsnit på siden forklarer den medfølgende grafik. Nederst på siden er det overraskende en stor webformular. En rent salgsrelateret hjemmeside, der bruger så meget god illustration, er sjælden. De jQuery-udløst overgange tilføjer glans til meddelelsen.
Infographic forklarer fordele og prissætning: 
Infographic forklarer designprocessen: 
Webformular: 
13. Orman Clark
Egenskaber: Skyer, jord og flyvende objekter
Beskrivelse: Som de to første hjemmesider i dette afsnit begynder Orman Clarks hjemmeside med himmel, men den høje side stikker med skyhimmel hele vejen til fodfodset, hvor vi rammer jorden. En mærkbar forskel mellem denne side og de fleste af de andre i denne artikel er den faste position for hovednavigation og illustration. Dette fremhæves af stjernen på toppen af baggrunden, der fremhæver det flydende æg. Webstedet indeholder også et godt integreret jQuery diasshow til porteføljen.
Ballon, ko og æg: 
Biplane og jQuery portefølje diasshow: 
Webformular, footer og fast navigation: 
14. Dreamerlines
Egenskaber: Forskellige collager.
Beskrivelse: Dreamerlines websted tager en diskret tilgang. Ligesom GANDRweb har hver sektion et særskilt grafik, der kun er bundet til dets nærliggende sektioner med hvidt rum. Hvert afsnit er dog enestående, detaljeret, farverig og opmærksomhedsfuld. Tunge illustrationer, stor fed tekst og baggrundsfarve indstiller tonen.
Stor tekst til at begynde: 
In-your-face collage: 
Webformular omgivet af mange billeder: 
15. Social Snack
Funktioner: Wire, fugle og jord.
Beskrivelse: Himmelmotivet bliver aldrig gammelt, og designere kan vælge mellem et hvilket som helst antal paletter for at farve deres horisont. Social Snacks horisont er lidt uklar, med en udtalt grøn og brun. Fugle sidder på ledninger, der er spredt lodret i hele siden for at adskille sektioner. Webstedet afsluttes med et tag på taget. Selvom bloggen ikke har jævnt jQuery-scrolling, fortjener den sjove illustreret overskrift med søde figurer.
Farvepaletten og fuglmotivet øverst: 
Rammerne for holdfotoerne hænger af en fugledråb: 
Cute tegn i blog sektionen: 
Slideshow
En af de mest hyppige og genkendelige anvendelser af jQuery er til det ærværdige diasshow. Når du ser indhold, der glider over skærmen efter et klik med musen, og ingen Flash kan findes, er det nok jQuery. Du kan finde slideshows på corporate websites, destinationssider, agenturporteføljer, e-handelswebsteder, overalt. De er så allestedsnærværende. Nedenfor er et par eksempler på diasshow, der kommer til live på grund af skarpe illustrationer.
16. GoSiteWave
Funktioner: Lodret lysbilledshow med vandret navigation og attraktive ikoner.
Beskrivelse: Det vertikalt rullende diasshow kombineret med ikonerne og billederne er den virkelige historie her. Diasshow forventes at rulle vandret, så det modsatte her er iøjnefaldende. De lyse blues og appelsiner, glatte afrundede knapper og mørk baggrund med dygtigt anbragte lysstråler tilføjer til effekten. Selvfølgelig, hvis ikonerne ikke var så godt færdige, kunne hjemmesiden måske ikke have lavet skåret.
Hjemmeside diasshow: 
Et andet lysbilledshow: 
17. Sketchen
Funktioner: Horisontal diasshow af Flash-film, med forudindlæst indhold, stor tekst og illustrationer.
Beskrivelse: Hvis du kan lide gul, vil du elske denne hjemmeside. Dette diasshow indeholder store beskærede illustrationer, der holder den gule baggrund intakt. Et ekstra lysbilledshow i pop-up "lightbox" indeholder porteføljen. Sagde jeg, at illustrationerne var store? De tager meget plads, men de er meget godt færdige. Baggrundsfarven og billederne accentueres af de grønne og hvide navigationselementer, og den skarpe kontrast sikrer, at brugervenlighed ikke er et problem.
megafon: 
Hvid footer: 
Æble: 
Portefølje i "lightbox": 
18. Form Femogfyrre
Funktioner: Glat lodret rulning, dynamisk genereret blogindhold, diasshow, hovednavigation fremhævning,
Beskrivelse: Lad ikke den monokrome farvepalet og de enkle linjetegninger narre dig. Denne agentur side har alt. Glat lodret rulning, et fast fodfelt, der overlejrer indhold, et portefølje diasshow, dynamisk indlejret blogindhold osv. Med alle disse funktioner går til det, er det, der virkelig sætter pladsen fra hinanden, det samlede antal tilfældige illustrationer, og det faktum, at de ' er alt ret sjovt. På samme måde er et besøg på webstedet ikke fuldstændigt uden at prøve den hilariske "Om" video.
Masser af illustrationer i startskærmen
Skrifttyper passer til billedstilen
Portfolio slide show
Fodboldnavigationstitler fremhæves, mens du ruller
Horisontal rulning
I modsætning til diasshowet, som normalt er begrænset til en sektion af en hjemmeside, sker der horisontalt rulning (som defineret her) på browserens niveau eller i det mindste føles på den måde. Dynamisk vandret rulning har ikke så mange gode eksempler som lodret rulning; men som du vil se, har designere, der tænker vandret, store forestillinger.
19. Serial Cut
Egenskaber: Store illustrationer til portefølje; vandret og lodret rulning.
Beskrivelse: Dette diasshow er virkelig designet til at tage op i browserenes synsfelt. Du kan ikke rulle til venstre eller højre, men betyder det noget? Illustrationerne og designet er så fremragende, at udvikleren kunne have haft kryds og tværs, op og ned eller enhver anden uintelligent navigationsmetode, og folk vil stadig bruge indsatsen for at finde ud af, hvad der kommer næste gang. Hvad der virkelig hjælper er størrelsen på navigationsikonet, og at porteføljens billeder og billeder optager hele skærmen.
Tog: 
Cd cover: 
3-D fyr med sko: 
20. Tyler Finck
Funktioner: Horisontale overgange, med animationer oprettet ud af baggrunden.
Beskrivelse: Her er et godt eksempel på at bruge baggrundsbilledet til at skabe en animationseffekt til den dynamiske horisontale rullning. Farvepaletten er primært sort og hvid. Skrifttyperne er fed og har tykke blokerede baggrunde på bestemte steder, og den billedbaserede type har et skitseret look. Den komplette pakke fungerer godt.
En minimalistisk hjemmeside: 
Bio: 
Pengeskuddet: 
Anden funktionalitet
Nogle websteder, der bruger jQuery, er ikke let kategoriserbare. De kan have ualmindelige funktioner eller gøre subtil brug af jQuery eller tilpasse en fælles teknik på en usædvanlig måde. Forindlæsning, automatisk tekstafslutning, fading ind og ud og lagring af tekst over billeder er nogle af de tricks, der findes i det sidste sæt af hjemmesider i denne samling.
21. Orange etiket
Funktioner: Billed forudindlæsning.
Beskrivelse: Forudindlæsning af billeder er omfanget af Orange Labels brug af jQuery. Når du ruller ned, tilføjes porteføljeposter til siden (med en roterende grafik, der fortæller dig, at de er forudindlæst). Fra et brugbarhedsmæssigt synspunkt holder denne praktiske funktion siden fra automatisk indlæsning af båndbreddehævende indhold. Illustrationen øverst er stor, farverig, meget detaljeret og lækkert øjenhag.
Illustrationen: 
Illustration zoomet ind: 
Portefølje element og footer: 
22. Silke Icon Finder
Funktioner: Tekstafslutning.
Beskrivelse: Indtast navnet på et ikon, og denne hjemmeside sorterer dets ikoner baseret på mulige resultater af det, du har skrevet indtil videre. Kvaliteten på ikoner er ret god, og tjenesten er ret praktisk på det hele. Fordi designet virkelig drejer sig om søgeresultater, har det lidt i vejen for visuel distraktion, hvilket er et stort plus.
Standardvisning: 
Søgeresultat for "light": 
23. Vyniknite
Funktioner: Fades.
Beskrivelse: Denne hjemmeside begynder med en stor mælkebøtteillustration, godt layout og fint udvalg af skrifttyper. Den eneste bemærkelsesværdige jQuery-handling sker, er den falme og ud, der sker, når du navigerer på fanerne. En anden lille skive af himlen er den måde, hvorpå mælkebøtte stængler overlapper både de aktive og inaktive faner. Og hvis du ser tæt på baggrunden, ser du nogle udførlige vindwirls, der ledsager den flydende fauna.
Mælkebøtter i massevis: 
24. Halo agenturet
Funktioner: Automatisk lysbilledshow med baggrunds illustration; tekst over billeder.
Beskrivelse: Baggrunde, baggrunde, baggrunde. Naviger gennem denne hjemmeside, og du finder en række dekorative dem fulde af farverige 3-D illustrationer. En imponerende portefølje kan fås gennem et jQuery diasshow på hjemmesiden. Alternativt kan du finde oplysninger om hvert element i porteføljen (eller "arbejde") af teksten overlejring på miniaturebilledet.
Hjemmeside med diasshow: 
Porteføljen overlejrer tekst på billeder: 
En anden farverig baggrund: 
Skrevet udelukkende til WDD af Maurice Wright. Han er en webudvikler og designer og skaber af Moluv.com . Siden 2000 har Moluv været en kilde til design inspiration til kreative sind på udkig efter de bedste websites på internettet.
Hvordan har jQuery ændret den måde, du designer dine hjemmesider på? Vær venlig at kommentere nedenfor ...