24 Clever Verkkotuotteet, jotka yhdistävät JQueryn ja kuvituksen
JavaScript-voiman ansiosta sanat "dynaaminen" ja "kuvitus" eivät enää koske pelkästään Flash-sivustoja.
Nyt dynaaminen HTML on todellisuutta yleisimmin käytetyissä selaimissa ja että runsaasti hienoja JavaScript-kirjastoja on olemassa helpottamaan sen avulla, CSS-sivustot voivat ottaa takaisin osan Flashin niin tiukasti pitämästä kadunnosta.
Näistä uusista JavaScript-kirjastoista jQuery on tullut yksi yleisimmistä käytännöistä, koska se on helppokäyttöinen, ominaisuuksien laaja ja aluksi keskittynyt visuaaliseen ainutlaatuisuuteen.
Tässä on 24 taitavaa esimerkkiä verkkosivujen suunnittelusta jQuery ja Illustration .
1.koodi Viisikymmentäviisi
Ominaisuudet: otsikon kuvauksen muuttaminen; useita pieniä diaesitysikkunoita.
Kuvaus: Tällä verkkosivustolla ei ole paljon aidosti hyvää suunnittelua koskevaa sisältöä, mutta jQueryä käytetään monin eri tavoin verkkosivuston ulkonäön ja käytettävyyden parantamiseksi. Lisää säännöllisesti muuttuva kuvitettu tausta ja mukavat pyöreät käyttöliittymäsäätimet ja sinulla on kaunis jQueryn ja kuvituksen avioliitto.
Kotisivu, jossa otsikkokuva: 
Vasen sarake, jonka tunnisteet vaihtelevat: 
Ikkunan varjostuksen otsikko sisäänkirjautumiseen: 
2. Frozn
Ominaisuudet: Pystysuora ja horisontaalinen liukuva.
Kuvaus: Muuta kuin isoja, värikkäitä piirejä, joissa numeroita, ominaisuus, jonka huomasin eniten oli kuvattuja profiilikuvia. Niinpä napsahdin niitä. Tuolloin tapahtui taika: pystysuora ja vaakasuora ikkuna-varjostus, joka avasi täyden valikoiman blogimerkintöjä upotetuilla Vimeo-videoilla. Jatkuva alatunnisteen kaltevuus on mielenkiintoinen vaikutus, kun vierität alas.
Suuret piirit ja tekijän kuvat kotisivulla: 
Pystysuoraan laajentuva sisältö: 
Kirjoittajan kuvitukset laajentuvat paljastamaan blogimerkintöjä ja videota: 
3. iPhone Mockup
Ominaisuudet: Vedä ja pudota, kohdistaminen
Kuvaus: Jos olet aiemmin luonut sovelluksen iPhonelle (ja mikä Web-kehittäjä ei ole?), Tämä voi olla verkkosivusto, jolla voit tarkistaa. Sen avulla voit vetää ja pudottaa piirrettyjä tai tietokoneella piirrettyjä liitäntäelementtejä sketched tai tietokoneella piirretty iPhone ääriviivat. Vaikka se on melko paljaat luut muotoilussa, se on innovatiivinen esimerkkikäyttö, joka olisi voitu vetää pois aiemmin Flashin kanssa.
Tietokoneella piirretty iPhone-editori: 
Sketched iPhone editor: 
4. Floridan kukoistaa
Ominaisuudet: Mouseovers avoimella, diaesitys
Kuvaus: Tämän splash-sivun kuvitetun puun loistavat värit ja yksityiskohdat ovat välitöntä huomiota herättäviä. Napsauta mitä tahansa luokasta, joka haarautuu puusta, ja saat vain kuvaavan jQuery-pohjaisen sisällön, mutta aivan toisenlaisen puun. Selaa alaspäin ja näet mukavan keskitetyn diaesityksen ja alatunnisteen, joka vie luonnollisen motiivin maan alle.
Täysi kuva kotisivulta, jossa on suuri puu, diaesitys ja alatunniste: 
"Käytettävyys" puu: 
"Joustavuus" puu: 
5. Tea Round App
Ominaisuudet: Slideshow, pienet animaatiot, liukuvat esineet
Kuvaus: Ehkä se on minulle tai merkki siitä, että Applella on loistavia suunnittelijoita, mutta pidän verkkosivustoista, jotka ovat rajautuneet iPhone-valokuvia. Tällä verkkosivustolla on animoitu, jossa on diaesityksiä, jotka on käynnistetty hiirellä joidenkin hyvin muotoiltujen painikkeiden avulla. Pyöristetty Helvetica-tyyppi sopii hyvin puhelimen ja painikkeiden muotoiluun. Tee-aiheiset kuvat sivulla ja kuvakaappauksissa app sitoa kaiken yhdessä.
Animaatiot iPhone-grafiikassa sivulla: 
Ponnahdusikkunassa näkyy sovelluksen näyttö: 
Toinen Tea Round -sovellusnäyttö iPhone-grafiikassa: 
6. Paras ennen
Ominaisuudet: Näyttösijainti, navigointianimaatio
Kuvaus: Jos verkkosivustot voisivat käyttää jQuery-steroideja, tämä olisi verkon Barry-sidos. Kaikkien dynaamisten kuvamateriaalien avulla tämä verkkosivusto voitaisiin helposti sekoittaa Flash-verkkosivustoon. Huolellisen tarkastelun jälkeen huomaat kuitenkin, että sivu ei ole Flash eikä monimutkainen ohjelmoinnin näkökulmasta. Mutta ymmärtäminen, että jälkiä Flash ei ole olemassa, syövät teidän psyykseesi.
Kotivalikko: 
Lisää juttuja kiharaiset housunkannattimet: 
Alivalikko ja portfolio: 
animaatio
Web-sivuston suunnittelu, johon DHTML valittiin animaation luomiseksi, on aina yllätys. Paras osa minulle on, että näen sen iPhonani. Olen varma, että tämä ei ole tärkein syy, miksi suunnittelijat päättivät sivuuttaa Flashin ja sen animaatioystävälliset työkalut. En tiedä kuinka paljon he luottivat jQueryyn animaationsa koodaamiseen, mutta heidän oli pitänyt saada sadistiset suuntaukset jonkinlaisella tavalla vetää se pois.
7. Torin silmä
Ominaisuudet: Origami linnut lentävät vaakatasossa.
Kuvaus: Kuka luulee käyttävänsä origamiä Web-sivulle? Ja kuka luulee käyttämään sinisiä origami-lintuja edustaakseen tweetejä pikemminkin kuin tavallisen sinisen kuvan? Ja kuka ajattelee animoimaan tweetejä? Vastaus näihin kysymyksiin on Torin silmän luojat. Rakenna verkkosivusto, jolla on jokin näistä ominaisuuksista, ja sinulla olisi jotain täysin alkuperäistä. Näille tekijöille, joilla oli kaikki nämä ominaisuudet, ei ollut tarpeeksi. He tekivät vasta-intuitiivisen päätöksen tehdä kaiken animaation ilman Flashia!
Origami Twitter lintuja lentää koko maiseman: 
8. Laukut
Ominaisuudet: Diaesitys ja alatunnisteen animaatio yhdellä värillä.
Kuvaus: JQueryn käyttö on ilmeisintä, kun diaesitys käynnistyy napsautuksella navigointialueella. Laaja valkoinen tila, musta tyyppi ja vastaavat kuvakkeet tekevät mukavasta verkkosivustosta. Mutta katso ja animaatio alatunnistimessa ei ole pysähtynyt toimimistasi saapuessasi. Napsauta hiiren kakkospainikkeella vankka mustaanimaatioita ja huomaat sivuston pitkäikäisen elokuvan salaisuuden: Sprites ja DHTML.
Kotisivu, jossa on runsaasti tilaa: 
Suuret kuvakkeet hajallaan diaesityksen sisällön läpi: 
Ala-animaatio toimii jatkuvasti, riippumatta siitä, missä olet verkkosivustolla: 
9. Kidd 81
Ominaisuudet: Header-animaatio vaakasuunnassa.
Kuvaus: Kirkkaat, talvi-aiheiset piirustukset kiinnittävät välittömästi huomiota, ja muotoilu on jatkuvatoimisesti alas jalkaterään. Kuten jotkut näistä muista verkkosivuista, jotka käyttävät jQueryä esineiden animoinnissa, sileät kuvat näyttävät erottomilta Flashilta ensi silmäyksellä. Kinkun jääpeite on kuitenkin vetävä "Wow! En voi uskoa, että voit vetää näitä "kuvakkeita.
Kotisivun otsikon animaatiot: 
Jalka, jolla on sama kuvitettu teema: 
Kauppa-osassa on sama merkki ja värit: 
Pystysuuntainen vieritys
Muutamat JavaScript-työkalut voivat käynnistää selauksen sivun osioiden välillä. Tietenkin, jQuery on enemmän kuin kykenevä suorittamaan tämän vaikutuksen, ja ainakin muutamat tämän osion verkkosivuista ottavat tämän reitin. Dynaaminen vieritys on hieno vaikutus, mutta yhdistettynä luovaan ja yksityiskohtaiseen kuvitukseen ominaisuus on vain osa suurempaa kuvaa.
10. Tomas Pojeta
Ominaisuudet: Taivas, valtameri, vedenalainen.
Kuvaus: Kuten tässä osassa muutamia muita sivustoja, Pojeta ottaa motiivin, joka menee korkealta pinnasta pinnan alle. Sivuston yläosa on ulkoavaruudessa, jossa on erittäin yksityiskohtainen raketti ja apina. Selaa alas ja näet ulkomaalaisia ja ilmapalloja alemmassa ilmakehässä. Jälkeen alaspäin on pääsiäispään näköinen maa-osa keskellä vettä, joka johtaa vedenalaisen näkymän sukellusveneen kanssa. Jokainen kuva sopii, ja siirtymät ovat yhtä saumattomia kuin se saa.
Rocket ja apina avaruudessa: 
Pääsiäinen saari ja toukka: 
Submarine vedenalainen: 
11. Morphix
Ominaisuudet: Tila, taivas, maa, maan alla.
Kuvaus: Morphix alkaa myös jonkin verran ylemmän ilmakehän vaikutuksesta, mutta siirtyy sitten merelle eikä maata kohti. Tyyli on ilmeisesti erilainen, mutta kunkin kerroksen kuva kattaa sivun leveyden, kuten viimeinen, mikä luo horisontin tunnetta. Ja taas, siirtyminen taivasta maanalaiseen virtaa sujuvasti, varsinkin dynaamisen vierityksen avulla.
Ylempi ilmapiiri, portfolio: 
Maataso lehmillä ja pilvenpiirtäjillä: 
Maanalainen, puiden juuret ja maapähkinä: 
12. GANDRWeb
Ominaisuudet: Erilaiset infographics.
Kuvaus: Toisin kuin edellisillä kahdella verkkosivustolla, tätä käytetään infografisesti merkkien, maisemien ja taustojen sijasta. Jokainen sivun osio selittää liitteenä olevan grafiikan. Sivun alalaidassa on yllättävän suuri web-lomake. Pelkästään myyntiin liittyvä verkkosivusto, joka käyttää niin paljon hyvää kuvaa, on harvinaista. JQuery-laukaisut siirtyvät lisäävät kiiltoa viestiin.
Etuja ja hinnoittelua kuvaava infografiikka: 
Suunnitteluprosessia selittävät infografiat: 
Web-lomake: 
13. Orman Clark
Ominaisuudet: Pilvet, maanpinnan ja lentävät esineet
Kuvaus: Kuten tämän jakson kahdesta ensimmäisestä verkkosivustosta, Orman Clarkin verkkosivusto alkaa taivaalla, mutta pitkä sivu pysyy pilvihevessä aina alasivulle, johon osuimme maahan. Huomattava ero tämän sivun ja useimpien muiden tässä artikkelissa on kiinteän sijainnin päävalikossa ja kuvassa. Tätä korostaa tähtipurkaus taustan yläosassa, joka korostaa kelluvaa munaa. Sivustolla on myös hyvin integroitu jQuery-kuvaesitys portfoliosta.
Ilmapallo, lehmä ja muna: 
Biplane ja jQuery-portfolion kuvaesitys: 
Web-lomake, alatunniste ja kiinteä navigointi: 
14. Dreamerlines
Ominaisuudet: Erilaiset kollaasit.
Kuvaus: Dreamerlines-sivusto on erillinen lähestymistapa. Kuten GANDRweb, jokaisessa osassa on erillinen grafiikka, joka on sidottu sen naapuriosastoihin vain valkoisella tilalla. Jokainen osa on kuitenkin ainutlaatuinen, yksityiskohtainen, värikäs ja huomiota herättävä. Raskas kuvitukset, iso lihavoitu teksti ja taustaväri asettavat sävyn.
Aloita iso teksti: 
In-the-face -kollageesi: 
Web-lomake, jota ympäröivät paljon grafiikkaa: 
15. Sosiaalinen Snack
Ominaisuudet: Lanka, linnut ja maa.
Kuvaus: Taivaskuvio ei koskaan vanhene, ja suunnittelijat voivat valita minkä tahansa paletin värejä horisonttiin. Social Snackin horisontti on hieman sumuinen, voimakas vihreä ja ruskea. Linnut istuvat lankkuja, jotka ovat hajallaan pystysuorassa koko sivun erillisiin osiin. Sivusto päättyy katolla. Vaikka blogissa ei ole pehmeää jQuery-rullausta, hauska kuvitettu otsikko, jossa on söpöjä merkkejä, ansaitsee mainita.
Väripaletti ja lintuteksti alkuun: 
Joukkuevalokuvien kehykset lepäävät lintulangasta: 
Söpöhahmoja blogin osassa: 
diaesitys
Yksi jQueryn yleisimmistä ja tunnistettavimmista käyttötavoista on kunnioitettava diaesitys. Aina kun näet, että sisältö ryntää ruutuun hiiren napsautuksen jälkeen, eikä Flashia löydy, se on luultavasti jQuery. Löydät diaesityksiä yritysten verkkosivustoilla, aloitussivuilla, toimistosalkkuilla, verkkokauppasivustoilla kaikkialla. Ne ovat niin läsnä. Seuraavassa on muutamia esimerkkejä kuvaesityksistä, jotka tulevat eloon terävien kuvioiden vuoksi.
16. GoSiteWave
Ominaisuudet: Vertikaalinen diaesitys vaakasuoralla navigoinnilla ja viehättävällä kuvakkeella
Kuvaus: Vertikaalisesti vierittävä diaesitys yhdistettynä kuvakkeisiin ja kuviin on tosi tarina täällä. Kuvaesitysten odotetaan selviävän vaakatasossa, joten päinvastoin on silmiinpistävää. Kirkkaat blues ja appelsiinit, liukas pyöristetyt painikkeet ja tumma tausta taidokkaasti sijoitetut valovirrat lisäävät vaikutusta. Tietenkin, jos kuvakkeet eivät olleet niin hyviä, sivusto ei ehkä ole tehnyt leikkausta.
Etusivu diaesitykset: 
Toinen diaesitys: 
17. Sketchen
Ominaisuudet: Vaakakuvaesitys Flash-elokuvista, valmiiksi ladatulla sisällöllä, suurella tekstillä ja kuvilla.
Kuvaus: Jos pidät keltaisesta, pidät tästä verkkosivustosta. Tämä diaesitys sisältää suuret leikatut kuvat, jotka pitävät keltaisen taustan ehjänä. Ponnahdusikkunan "lisävalikossa" on myös lisäesitys, jossa on salkku. Mainitsinko että kuvat olivat suuret? Heillä on paljon tilaa, mutta he ovat hyvin valmiita. Taustavärejä ja kuvia on korostettu vihreillä ja valkoisilla navigointielementeillä, ja terävä kontrasti takaa, että käytettävyys ei ole huolta.
Megafoni: 
Valkoinen jalka: 
Omena: 
Salkku "Lightbox": 
18. Lomake viisikymmentäviisi
Ominaisuudet: Sileä pystysuuntainen vieritys, dynaamisesti luotu blogisisältö, diaesitys, päänavigoinnin korostus,
Kuvaus: Älä anna yksivärinen väripaletti ja yksinkertaiset piirustukset hämätä. Tällä viraston sivustolla on kaikki. Tasainen pystysuora vieritys, kiinteä alatunniste, joka peittää sisällön, portfolion diaesityksen, dynaamisesti sulautetun blogisisällön jne. Kaikkien näiden toimintojen kohdalla, mikä todella asettaa sivuston erillään on satunnaisten kuvitusten kokonaismäärä ja se, kaikki kauniita. Näiden rivien ohella vierailu sivustoon ei ole täydellinen ottamatta näennäisesti "Tietoja" videota.
Paljon kuvia aloitusnäytössä
Kirjasimet vastaavat kuvaustyyliä
Portfolioesitys
Alatunnisteen otsikot korostuvat vierittämällä
Vaakasuuntainen vieritys
Toisin kuin diaesitys, joka yleensä rajoitetaan jonkin sivuston osioon, horisontaalinen vieritys (kuten tässä määritellään) tapahtuu selaustasolla tai ainakin tuntuu tällä tavalla. Dynaamisella vaakasuoralla rullauksella ei ole yhtä monta suurta esimerkkiä kuin pystysuuntainen vieritys; mutta kuten näet, suunnittelijat, jotka ajattelevat horisontaalisesti, ovat suuria kuvitteita.
19. Serial Cut
Ominaisuudet: Suuret salkun kuvitukset; horisontaalinen ja pystysuora vieritys.
Kuvaus: Tämä diaesitys on todella suunniteltu ottamaan selaimen katselualue. Et voi vierittää vasemmalle tai oikealle, mutta onko se väliä? Kuvat ja muotoilu ovat niin erinomaisia, että kehittäjällä olisi ollut ristiin ristikko, ylösalaisin tai jokin muu tahattomasti navigointimenetelmä, ja ihmiset viettäisivät edelleen vaivaa selvittääkseen, mitä seuraavaksi tulee. Mikä todella auttaa on navigointikuvakkeen koko ja portfolion valokuvat ja kuvat ottavat koko näytön.
junat: 
CD-kansi: 
3-D kenkä kenkiä: 
20. Tyler Finck
Ominaisuudet: Horisontaaliset siirtymät, joissa on taustakuvia.
Kuvaus: Tässä on hyvä esimerkki taustakuvan käyttämisestä animaation vaikutuksen luomiseksi dynaamiselle vaakasuoralle rullalle. Väripaletti on pääasiassa mustavalkoista. Kirjoituslajit ovat rohkeita ja niissä on paksuja blocky taustoja tietyissä paikoissa, ja kuvapohjainen tyyppi on sketchy look. Koko paketti toimii hyvin.
Minimalistinen kotisivu: 
Bio: 
Rahaa ammuttiin: 
Muut toiminnot
Jotkut verkkosivustot, jotka käyttävät jQueryä, eivät ole helposti kategorisoituvia. Heillä saattaa olla harvinaisia piirteitä tai jQueryn hienovarainen käyttö tai muokata yhteistä tekniikkaa epätavallisella tavalla. Esilataus, automaattinen tekstin viimeistely, haalistuminen sisään ja ulos sekä kerrostus tekstissä kuvina ovat joitain temppuja, jotka löytyvät tämän kokoelman viimeisimmistä verkkosivustoista.
21. Oranssi tarra
Ominaisuudet: Kuvan esilataus.
Kuvaus: Kuvan esilataus on Orange Labelin jQueryn käyttö. Kun vierität alas, salkun kohteet lisätään sivulle (pyörivä grafiikka kertoo, että ne esiasetetaan). Käyttökelpoisuuden näkökulmasta tämä kätevä ominaisuus pitää sivun lataamasta automaattisesti kaistanleveyden hautomateriaalia. Yläosassa oleva kuva on iso, värikäs, erittäin yksityiskohtainen ja herkullinen silmänruoka.
Kuva: 
Kuva zoomattu: 
Salkun kohde ja alatunniste: 
22. Silk Icon Finder
Ominaisuudet: Tekstin suorittaminen.
Kuvaus: Kirjoita kuvakkeen nimi ja tämä verkkosivusto lajittelee kuvakkeet sen perusteella, mitä olet jo kirjoittanut. Kuvakkeiden laatu on melko hyvä ja palvelu on varsin kätevä koko. Koska suunnittelu on oikeastaan hakutuloksissa, siinä on vähän näköhäiriöitä, mikä on iso lisäys.
Oletusnäkymä: 
Tulokset haulle "light": 
23. Vyniknite
Ominaisuudet: Häivyttää.
Kuvaus: Tämä sivusto alkaa suurella voikukkien kuvauksella, hyvällä asettelulla ja hienolla kirjasintyypillä. Ainoa havaittavissa oleva jQuery-toiminta on häipyminen ja ulos, joka tapahtuu välilehtien navigoinnissa. Toinen pieni taivaan viipale on tapa, jolla voikukan varret ovat päällekkäisiä sekä aktiivisten että ei-aktiivisten kielekkeiden kanssa. Ja jos tarkastelet tarkkaan taustalla, näet joitain laimeita tuulen pyörteitä mukana kelluva eläimistö.
Voikukka yllin kyllin: 
24. Halo Agency
Ominaisuudet: Automaattinen diaesitys, jossa taustakuva; teksti yli kuvia.
Kuvaus: Taustat, taustat, taustat. Siirry tämän verkkosivuston kautta ja löydät erilaisia koristeellisia, täynnä värikkäitä 3D-kuvituksia. Tyylikäs salkku voidaan käyttää jQuery-diaesityksen kautta kotisivulla. Vaihtoehtoisesti voit etsiä tietoja kunkin salkun jokaisesta kohteesta (tai "työ") osiosta pikkukuvan tekstisäveltä.
Etusivu diaesityksellä: 
Portfolio peittää tekstin kuvista: 
Toinen värikäs tausta: 
Kirjoittanut yksinomaan WDD Maurice Wright. Hän on web-kehittäjä ja suunnittelija ja luoja Moluv.com . Vuodesta 2000 lähtien Moluv on ollut inspiraation lähde luoville mielialoille, jotka etsivät Internetin parhaita verkkosivustoja.
Kuinka jQuery on muuttanut sivustosi suunnittelua? Kommentoi alla ...