24 Snjall vefsvæði hönnun sem sameina JQuery og mynd
Þökk sé hugsanlega JavaScript, eru orðin "dynamic" og "illustration" ekki lengur eingöngu á Flash-undirstaða vefsíðum.
Nú þegar dynamic HTML er að veruleika í algengustu vöfrum og að mikið af ímyndaða JavaScript bókasöfn eru til þess að nota það auðvelt, geta CSS vefsíður tekið nokkrar af götuskröfunum sem haldnar eru svo fastar af Flash.
Af þessum nýju JavaScript bókasöfnum hefur jQuery orðið eitt af því sem mest er notað vegna notkunar notkunar, breiddar á eiginleikum og upphaflegu áherslu á sjónræn sérstöðu.
Hér eru 24 snjall dæmi um vefsíðuhönnun með jQuery og Illustration .
1.Form fimmtíu og fimm
Lögun: Breyting á hausmyndinni; margar lítil myndasýningar gluggakista.
Lýsing: Ekki aðeins hefur þessi síða mikið af raunverulegu góðu hönnunaratengdu efni en jQuery er notað á ýmsa vegu til að auka útliti vefsins og notagildi. Bættu við í reglulega breyttri myndrænri bakgrunni og nokkrar fallegar hringlaga tengistýringar og þú hefur fallegt hjónaband af jQuery og myndinni.
Heimasíða með hausmynd: 
Vinstri dálkur með merkjum skipt á: 
Gluggi skuggi haus fyrir að skrá þig inn: 
2. Frozn
Lögun: Lóðrétt og lárétt renna.
Lýsing: Annars en stórar, skær lituðu hringi með tölum, þá eiginleiki sem ég tók eftir var mest sýndar myndirnar. Svo ég smellti á þá. Það er þegar galdur gerðist: lóðrétt og lárétt gluggaskygging sem opnaði fullt sett af bloggfærslum með embed in Vimeo myndböndum. Viðvarandi fótgangandi halli er áhugavert þegar þú flettir niður.
Stór hringir og höfundarmyndir á heimasíðunni: 
Lóðrétt útvíkkandi efni: 
Höfundarmyndirnar stækka til að sýna bloggfærslur og myndskeið: 
3. iPhone Mockup
Lögun: Dragðu og slepptu, miða á
Lýsing: Ef þú hefur einhvern tíma hugsað um að búa til forrit fyrir iPhone (og hvaða vefur verktaki hefur það ekki?), Þá gæti þetta verið vefsíða til að skrá sig út. Það gerir þér kleift að draga og sleppa skissuðum eða tölvutæku tengiþáttum á skissu eða tölvutæku iPhone-útlínunni. Þrátt fyrir að það sé falleg bein í hönnun, þá er það nýstárlegt að nota mynd sem gæti aðeins verið dregin frá áður með Flash.
Tölvutækin iPhone ritstjóri: 
Sketched iPhone ritstjóri: 
4. Flórída Flourish
Lögun: Mouseovers með gagnsæi, myndasýningu
Lýsing: Ljómandi litir og smáatriði myndskreyttu trésins á þessari skvetta síðu eru strax athyglisbrestir. Smelltu á einhvern af þeim greinum sem greinir frá trénu og þú munt fá ekki aðeins lýsandi jQuery-ekið efni heldur líka alveg annað tré. Skrunaðu niður og þú munt sjá fallega miðju myndasýningu og fót sem tekur náttúrulegt mótíf neðanjarðar.
Full yfirlit yfir heimasíðuna, með stóru tré, myndasýningu og fæti: 
"Nothæfi" tré: 
"Sveigjanleiki" tré: 
5. Tea Round App
Lögun: Slideshow, minniháttar fjör, renna hlutir
Lýsing: Kannski er ég eða tákn um að Apple hafi frábærar hönnuðir en ég eins og vefsíður sem hafa klippt iPhone myndir. Þessi vefsíða er með hreyfimynd, með skyggnusýningu í skjár sem er gerð af mousing á nokkrum velbúnum hnöppum. Hringlaga Helvetica gerð blandar vel við hönnun símans og hnappa. Te-þema myndirnar á síðunni og í skjámyndum apparinnar binda allt saman.
Teiknimyndir í iPhone grafíkinni á síðunni: 
Pop-up gluggi birtir skjá skjásins: 
Annar Te Round app skjár sýndur í iPhone grafík: 
6. Besta fyrir
Lögun: Skjár staðsetningu, siglingar fjör
Lýsing: Ef vefsíður gætu tekið jQuery sterum, þá væri þetta Barry Bonds á vefnum. Með öllum öflugum myndefnum gæti þetta vefsvæði auðveldlega misst fyrir Flash-vefsíðu. Eftir nákvæma skoðun, þó að þú munt komast að því að blaðið er hvorki Flash né flókið frá forritunarmarki. En sú staðreynd að ekki er um að ræða snefileika í Flash verður áfram eytt í sálarinnar.
Heimavalmyndin: 
Fleiri hlutir í hrokkið armbönd: 
Undirvalmynd og eigu: 
Hreyfimyndir
Að finna vefsíðuhönnun sem DHTML var valin til að búa til fjör er alltaf á óvart. Það besta fyrir mig er að ég get séð það á iPhone minn. Ég er viss um að þetta er ekki helsta ástæðan fyrir því að hönnuðirnir kusuðu að hunsa Flash og hreyfimyndir hennar. Ég veit ekki hversu mikið þeir treystu á jQuery að kóða fjör þeirra, en þeir þurftu að hafa haft siðferðislegar tilhneigingar af einhverju tagi til að draga það af.
7. Augu Tori
Lögun: Origami fuglar fljúga lárétt.
Lýsing: Hver telur að nota Origami á vefsíðu? Og hver hugsar að nota bláa Origami fugla til að tákna tvo, frekar en venjulega bláa myndina? Og hver hugsar um að búa til kvak? Svarið við þessum spurningum er skapararnir af Tori's Eye. Búðu til vefsíðu með einhverju af þessum eiginleikum og þú vilt hafa eitthvað alveg upprunalega. Fyrir þessar höfundar, að hafa allar þessar aðgerðir var ekki nóg. Þeir gerðu andstæðingur-leiðandi ákvörðun um að gera allt fjör án Flash!
Origami Twitter fuglar sem fljúga yfir landslag: 
8. Töskur
Lögun: Skyggnusýning og fótur hreyfimynd með einum litatáknum.
Lýsing: Notkun jQuery hér er augljós þegar myndasýningin er í gangi með því að smella á flakkasvæðið. The víðtæka hvíta plássið, svarta gerðin og samsvörunartáknmyndin gera þér kleift að sjá fallega vefsíðu. En sjáðu, fjör í fótinn hefur ekki hætt að vinna frá komu þinni. Hægrismelltu á solid svartan fjör og þú munt uppgötva leyndarmálið á langvarandi kvikmyndum vefsins: Sprites og DHTML.
Heimasíða með mikið af hvítu plássi: 
Stórir tákn dreifðir í gegnum myndasýninguna: 
Fótbolta hreyfimyndir liggja stöðugt, óháð því hvar þú ert á vefsíðunni: 
9. Kidd 81
Lögun: Header hreyfimynd ferðast lárétt.
Lýsing: Björguð vetrarþema teikningar hérna ná athygli þinni strax og hönnunin hefur samfellu alla leið niður á fæti. Eins og sumir af þessum öðrum vefsíðum sem nota jQuery til að hreyfa hluti, virðast þær sléttar myndir óaðskiljanleg frá Flash við fyrstu sýn. The kökukrem á köku, þó, er draggable "Vá! Ég get ekki trúað því að þú getir dregið þessar "tákn.
Forsíða haus fjör: 
Fót með sömu myndatökuþema: 
Verslunin er með sama staf og litum: 
Lóðrétt skrun
Nokkur JavaScript verkfæri eru fær um að kveikja á sléttri hreyfingu milli hluta af síðu. jQuery, auðvitað, er meira en fær um að framkvæma þessa áhrif, og að minnsta kosti nokkrar af vefsíðum í þessum kafla taka þá leið. Dynamic rolla er góð áhrif, en í sambandi við skapandi og nákvæmar myndir er eiginleiki aðeins hluti af stærri myndinni.
10. Tomas Pojeta
Lögun: Sky, haf, neðansjávar.
Lýsing: Eins og nokkrar aðrar vefsíður í þessum kafla samþykkir Pojeta myndefni sem fer frá háum hæð til undir yfirborðinu. Efst á vefsíðunni er í geimnum með mjög nákvæmri eldflaugar og api. Skrunaðu niður og þú munt sjá geimverur og blöðrur í neðri andrúmsloftinu. Lengra niður er páskaeyja-útlit landsins í miðju vatni, sem leiðir til neðansjávar útsýni með kafbátur. Hver dæmisaga passar, og umbreytingin er eins og óaðfinnanlegur eins og hún gerist.
Ristill og api í geimnum: 
Páskaeyja og túanskan: 
Kafbátur neðansjávar: 
11. Morphix
Lögun: Rúm, himinn, land, neðanjarðar.
Lýsing: Morphix byrjar einnig með einhverri efri andrúmslofti, en breytist síðan í land í stað sjávar og lýkur með neðanjarðarlestri. Stíllinn er augljóslega ólíkur, en myndin fyrir hvert lag nær yfir breidd blaðsins, eins og síðasta, sem skapar tilfinningu fyrir sjóndeildarhringnum. Og aftur, umskipti frá himni til neðanjarðar rennur vel, sérstaklega með hreyfingu.
Efri andrúmsloftið, með eigu: 
Jarðhæð, með kýr og skýjakljúfa: 
Neðanjarðar, með rótum trjáa og jarðhita: 
12. GANDRWeb
Lögun: Ýmsar infographics.
Lýsing: Ólíkt fyrri tveimur vefsíðum, notar þessi infographics í stað stafi, landslag og bakgrunn. Hver hluti af síðunni útskýrir meðfylgjandi mynd. Neðst á síðunni er óvænt, stórt veffang. A eingöngu sölu-tengd vefsíða sem notar svo mikið gott dæmi er sjaldgæft. JQuery-kveikja umbreytingarnar bæta gljáa við skilaboðin.
Infographic útskýrir bætur og verðlagningu: 
Infographic útskýrir hönnun ferli: 
Vefur mynd: 
13. Orman Clark
Lögun: Ský, jörð og fljúgandi hlutir
Lýsing: Eins og fyrstu tvær vefsíðurnar í þessum kafla byrjar vefsíðu Orman Clark með himni, en hávaxinn blaðsíða festist með skýshreyfingu alla leið á fótinn, þar sem við lentum á jörðu. Merkjanlegur munur á þessari síðu og flestir hinna í þessari grein er fast staða aðalleiðsagnarinnar og myndarinnar. Þetta er áhersla á stjörnustöðina efst í bakgrunni sem leggur áherslu á fljótandi egg. Vefsíðan inniheldur einnig vel samþætt jQuery myndasýningu fyrir eignasafnið.
Loftbelgur, kýr og egg: 
Biplane og jQuery eigu myndasýningu: 
Vefur mynd, fót og föst flakk: 
14. Dreamerlines
Lögun: Ýmsir klippimyndir.
Lýsing: Dreamerlines-síða tekur stakur nálgun. Eins og GANDRweb, hver hluti hefur sérstakt grafík sem er bundið við nærliggjandi hluta hennar aðeins með hvítu rými. Hver hluti er þó einstakt, nákvæmt, litrík og athyglisvert. Þungar myndir, stór djörf texti og bakgrunnslitir setja tóninn.
Stór texti til að byrja: 
Birting í andlitinu þínu: 
Vefmynd umkringdur mikið af myndefnum: 
15. Félagsleg snarl
Lögun: Vír, fuglar og jörð.
Lýsing: Himnuskráin verður aldrei gömul og hönnuðir geta valið úr hvaða fjölda pallettum sem er til að lita sjóndeildarhringinn. Skýringarmynd Social Snack er svolítið dökk, með áberandi grænt og brúnt. Fuglar sitja á vír sem eru dreift lóðrétt á síðunni til að aðskilja köflum. Vefsvæðið lýkur með þaki. Þó að bloggið hafi ekki slétt jQuery rolla, þá er skemmtilegt sýnilegt haus með sætum stafi skilið.
Litavalið og fuglsmótið efst: 
Rammar fyrir liðsmyndirnar hanga af fuglavír: 
Sætur stafir í blogginu: 
Slideshow
Eitt af algengasta og þekkta notkun jQuery er fyrir venerable myndasýningu. Í hvert skipti sem þú sérð innihaldssveifla yfir skjáinn eftir smelli og engin Flash er að finna, er það líklega jQuery. Þú finnur slideshows á fyrirtækjafyrirtækjum, áfangasíðum, auglýsingastofum, e-verslun websites, alls staðar. Þeir eru alls staðar nálægir. Hér að neðan eru nokkur dæmi um slideshows sem koma á lífi vegna skarpa myndskreytinga.
16. GoSiteWave
Lögun: Lóðrétt myndasýning með láréttri flakk og aðlaðandi tákn.
Lýsing: Lóðrétt skyggnusýning, ásamt táknum og myndum, eru raunveruleg saga hér. Búist er við að myndasýningar rúlla lárétt, svo hið gagnstæða hér er augljóst. Björtu blúsin og appelsínurnar, sléttar ávalar hnappar og dökk bakgrunnur með hæfileikaríkum birtustraumum bæta við áhrifum. Auðvitað, ef táknin voru ekki svo vel búin, gæti vefsvæðið ekki gert skera.
Heimasíða glærusýning: 
Annar myndasýning: 
17. Sketchen
Lögun: Lárétt myndasýning í Flash-kvikmyndum, með fyrirfram hlaðnu efni, stórum texta og myndum.
Lýsing: Ef þú vilt gula, munt þú elska þennan vef. Þessi myndasýning inniheldur stórar skurðar myndir sem halda gula bakgrunninum ósnortinn. Viðbótarupplýsingar myndasýning í pop-up "lightbox" inniheldur eignasafnið. Sagði ég að myndirnar væru stórir? Þeir taka upp mikið pláss, en þeir eru mjög vel búnir. Bakgrunni liturinn og myndirnar eru hreint af grænu og hvítu siglingalistunum og skörp andstæða tryggir að nothæfi er ekki áhyggjuefni.
Gjallarhorn: 
Hvítur fætur: 
Apple: 
Portfolio í "lightbox": 
18. Form Fimmtíu og fimm
Lögun: Slétt lóðrétt skrun, virk myndað blogg innihald, skyggnusýning, aðal flakk hápunktur,
Lýsing: Ekki láta tvílita litavalið og einfalda teikningar teikna þig. Þessi auglýsingastofa síða hefur allt. Slétt lóðrétt skrun, fast fótfesting sem yfirborðs efni, myndasýningu myndasafns, innbyrðis blogg innihald osfrv. Með öllum þessum aðgerðum að fara fyrir það er það sem raunverulega setur síðuna í sundur, heildarfjölda handahófi mynda og sú staðreynd að þau ' ert allt ansi fyndið. Með hliðsjón af þessum línum er heimsókn á vefsvæðið ekki lokið án þess að taka sýnishorn af hræðilegu "Um" myndbandinu.
Fullt af myndum í byrjunarskjánum
Leturgerðir passa við myndatökustílinn
Portfolio sýningarsýning
Færri titill fyrir neðanjarðarflipa veltu á meðan þú flettir
Lárétt að fletta
Ólíkt myndasýningu, sem venjulega er bundið við hluta vefsvæðis, fer lárétt skrun (eins og skilgreint er hér) á vafrastigi, eða finnst að minnsta kosti að minnsta kosti. Dynamic lárétt skrun hefur ekki eins mörg frábær dæmi og lóðrétt skrun; en eins og þú munt sjá, hönnuðir sem hugsa lárétt hafa mikla hugmyndaflug.
19. Serial Cut
Lögun: Stór myndatökur fyrir eigu; lárétt og lóðrétt skrun.
Lýsing: Þessi myndasýning er mjög hönnuð til að taka upp sýnissvæði vafrans. Þú getur ekki flett til vinstri eða hægri, en skiptir það máli? Myndirnar og hönnunin eru svo framúrskarandi að verktaki gæti haft criss-cross, hvolfi eða önnur ósannfærandi leið til að sigla og fólk myndi samt leggja áherslu á að finna út hvað er að koma næst. Það sem raunverulega hjálpar er stærð stýrihugbúnaðarins og að myndasöfnin og myndirnar taka upp alla skjáinn.
Lestir: 
CD kápa: 
3-D strákur með skóm: 
20. Tyler Finck
Lögun: Láréttar umbreytingar, með hreyfimyndir búin til úr bakgrunninum.
Lýsing: Hér er frábært dæmi um að nota bakgrunnsmyndina til að búa til hreyfimynd fyrir hreyfimyndaða hreyfingu. Litavalið er fyrst og fremst svart og hvítt. Leturgerðirnar eru feitletruðir og eru þykkir áþreifanlegir bakgrunnur á ákveðnum stöðum og myndatengda gerðin er sketchy útlit. Fullbúin pakki virkar vel.
A lægstur heimasíða: 
Bio: 
The peningar skot: 
Önnur virkni
Sumar vefsíður sem nota jQuery eru ekki auðveldlega flokkaðar. Þeir kunna að hafa óvenjulegan eiginleika eða gera lúmskur notkun jQuery eða aðlaga sameiginlega tækni á óvenjulegan hátt. Forhleðsla, sjálfvirkur textaskilningur, hverfa inn og út og laga texta yfir myndir eru nokkrar af þeim bragðareinum sem finnast í lokasetu vefsvæða í þessu safni.
21. Orange merki
Lögun: Mynd fyrir hleðslu.
Lýsing: Mynd sem er fyrirfram hleðsla er umfang notkunar Orange Labels jQuery. Þegar þú flettir niður eru eignasöfn bætt við síðuna (með snúningsgrafíni sem segir að þau séu fyrirfram hleðsla). Frá nothæfi viðhorf heldur þetta þægilegi eiginleiki að blaðsíðan sé sjálfkrafa hlaðið niður með bandbreiddinnihald. Myndin efst er stór, litrík, mjög nákvæm og ljúffengur auga nammi.
Myndin: 
Myndin er aðdregin í: 
Portfolio atriði og fótur: 
22. Silk Icon Finder
Lögun: Texti lokið.
Lýsing: Sláðu inn heiti táknmyndar og þessi síða flokkar táknin sem byggjast á hugsanlegum árangri af því sem þú hefur skrifað svo langt. Gæði táknanna er nokkuð góð og þjónustan er frekar þægileg í heild sinni. Vegna þess að hönnunin er í raun um leitarniðurstöður, það hefur lítið í vegi fyrir sjónrænum truflunum, sem er stórt plús.
Sjálfgefið útsýni: 
Leitarniðurstöður fyrir "ljós": 
23. Vyniknite
Lögun: Fades.
Lýsing: Þessi vefsíða byrjar með góðan túnfífillarmynd, góðan skipulag og gott úrval leturs. Eina áberandi jQuery aðgerðin sem gerist er að hverfa og út sem gerist þegar þú vafrar flipann. Annað lítið sneið af himni er hvernig ástin á hvítblómahnúði skarast bæði virk og óvirkt flipa. Og ef þú lítur vel út í bakgrunni, munt þú sjá nokkrar vandaðar vindrullar sem fylgja fljótandi dýralífinu.
Múslímar mikið: 
24. Halo stofnunin
Lögun: Sjálfvirk myndasýning með bakgrunnsmynd; texti yfir myndir.
Lýsing: Bakgrunnur, bakgrunnur, bakgrunnur. Farðu í gegnum þessa vefsíðu og þú munt finna margs konar skreytingar sjálfur fullar af litríkum 3-D myndum. Glæsilegt safn er hægt að nálgast með jQuery myndasýningu á heimasíðunni. Einnig er hægt að finna upplýsingar um hvert atriði í eignasafnshlutanum (eða "vinnu") úr textayfirlitinu á smámyndinni.
Heimasíða með myndasýningu: 
Safnið leggur yfir texta á myndum: 
Annar litríkur bakgrunnur: 
Skrifað eingöngu fyrir WDD eftir Maurice Wright. Hann er vefhönnuður og hönnuður og skapari Moluv.com . Frá árinu 2000, Moluv hefur verið uppspretta hönnun innblástur fyrir skapandi huga að leita að bestu vefsíðum á Netinu.
Hvernig hefur jQuery breyst hvernig þú hannar vefsíður þínar? Vinsamlegast athugasemd hér fyrir neðan ...