21 parasta esimerkkiä JavaScriptistä

Sivu 1/2: Sivu 1

JavaScript luo alustoja, jotka voivat sitouttaa käyttäjän ja varmistaa, että hän muistaa sivustosi ja jatkaa vierailua. Sillä voidaan luoda pelejä, sovellusliittymiä, vierityskykyjä ja paljon muuta.

Internet on täynnä inspiraatiota web-suunnitteluun , mukaan lukien upeita esimerkkejä siitä, kuinka JavaScriptiä käytetään verkkosivuston herättämiseen ja hyvien käyttökokemusten tarjoamiseen. Täältä valitsemme joitain suosituimpia esimerkkejä JavaScript-toiminnasta inspiraationasi.



01. Histografia

Histografia on hämmästyttävä tapa tutkia 14 miljardia vuotta tavaraa



Histografia on hämmästyttävä tapa tutkia 14 miljardia vuotta tavaraa

Jos olet koskaan katsellut Cosmosia, saatat muistaa Carl Saganin puhuvan Kosmisesta kalenterista. Jos maailmankaikkeuden ikä tiivistettäisiin yhdeksi vuodeksi, kirjattu ihmiskunnan historia mahtuisi viimeisiin sekunteihin 31. joulukuuta.

14 miljardin vuoden tapahtumat ovat valtava aineisto, ja sen näyttäminen selaimessa ei ole helppo tehtävä. Mutta suunnittelija ja kehittäjä Matan Stauber nousi haasteeseen - vaikka hän ei ollutkaan varma, että se olisi mahdollista: 'Luulen, että tärkeimmän esteen on oltava mittasuhteet', hän selittää. 'Kuinka luodaan aikajana, kun 99,9 prosenttia tiedettävästä historiasta on tiivistettävä alle yhteen näytön pikseliin?'



Historioitsijan poika Stauber loi histografian opiskelijana Bezalelin taideakatemiassa Ronel Morin johdolla. 'Jos ajattelemme tapoja, joilla ihmiset visualisoivat historiaa, aikataulut ovat luultavasti yleisimpiä, mutta silti ne eivät ole muuttuneet paljon painetun paperin päivien jälkeen', hän sanoo. '' Näin sen mielenkiintoisena suunnittelumahdollisuutena, etenkin nykyään pääsyn suuriin tietolähteisiin. ''

Sivusto skannaa ja indeksoi tapahtumia Wikipediasta, tarttuu artikkeliin ja etsii Google-kuvan ja YouTube-videon. Tiedot ovat helposti löydettävissä ja ilo kuluttaa. Jos olet koskaan menettänyt tuntikausia tutkia Wikipedia-artikkeleita, varaa paljon aikaa tälle artikkelille.

02. Filippo Bello

Adoratorio päätti käyttää CSS3: ta ja Javascriptia WebGL: n sijasta saadakseen syvyyden tunteen



Adoratorio päätti käyttää CSS3: ta ja Javascriptia WebGL: n sijasta saadakseen syvyyden tunteen

Tämä italialaisen 3D-taiteilijan Filippo Bellon kykyjä esittelevä online-salkku suunniteltiin, suunniteltiin ja kehitettiin yrityksen sisällä Adoratorio esittäjä (t): Enea Rossi ja Alessandro Rigobello. Joukkueelle annettiin täydellinen vapaus suunnitella sitä.

Syvyysleikki koko verkkosivustolla on erittäin tehokas - kuvat liikkuvat hitaasti katsojaa kohti, luoden vaikutelman jokaisen projektin sukelluksesta. Tämä saavutetaan käyttämällä ns. Segmenttiefektiä: taustakuva toistetaan eri laatikoissa, jotka liikkuvat kohti katsojaa. Tiimi haastoi itsensä välttämällä ilmeisimpiä tekniikoita. 'WebGL ei sovi kaikenlaisille käyttäjille', kertoo taiteellinen johtaja ja perustaja Rossi. 'Tämän sivuston tärkein haaste oli siis ymmärtää, kuinka syventää näyttöä käyttämällä vain CSS3- ja JavaScript-koodijonoja.'

Sivusiirtymät ja pienet zoomausefektit kuvissa ovat mukava lisä kosketus lopputulokseen, mikä oli - kuten Rossi kuvailee - 'ehdottomasti yli odotuksemme'.

03. St. Louis Browns

JavaScript-esimerkkejä: St. Louis Browns

St. Louis Browns -sivusto on tyyliltään kuin vintage-kirja

Tälle verkkosivustolle St. Louis Brownsin baseball-joukkueen historiasta, digitaalitoimisto HLK on suunnitellut erittäin kauniin kokemuksen. Sivusto lukee kuin hyvin muotoiltu vintage-kirja, joka sisältää lukuja ja teksturoitua typografiaa. Käyttäjät voivat selata kutakin lukua aikaperusteisen, tarinankaltaisen kokemuksen saamiseksi.

Inspiraatiota sivustolle on hankittu 1920-luvun käsikirjoituksista ja mainoksista, joista monet ovat suoraan niiden kuvaamien vuosien kuvia. Tämä tuo ainutlaatuisen päivätyn tunnelman moderniin, digitaaliseen tilaan. Tätä täydentää harmaa-ruskea sävyinen värimaailma, korostettuna yhdellä oranssin sävyllä.

Jotkut suosikkiosastani tällä sivustolla ovat pieniä yksityiskohtia, kuten valikkopainike (pyöreä ja sisällä hampurilaisvalikko), joka muuttuu baseballiksi hoverilla. Rakastan myös vasemmanpuoleista aikajanaa, joka seuraa näyttöä ja päivityksiä vierityksessä.

Sivusto on rakennettu Node.js: n ja Express-kehyksen avulla, jotta päivitys ja sujuva siirtyminen sisällön välillä on sujuvaa.

04. Leg Work Studio

JavaScript-esimerkkejä: Jalkatyö

Leg Work Studion sivusto käyttää interaktiivisia animaatioita saadakseen kokemuksen eloon

Jalan työ tekee paljon hyvää työtä verkossa graafisesta suunnittelusta vuorovaikutukseen ja mediaan. Joten ei ole mikään yllätys huomata, että sen oma henkilökohtainen sivusto ei ole poikkeus. Studion persoonallisuus heijastuu hauskojen, sekoitetun median kuvitusten kautta. Siinä yhdistyvät vintage-valokuvatehosteet (kuten pisteverkkokuvio) digitaalisesti maalattuihin valkoisiin aksentteihin ja fyysisen käsialan skannauksiin luomaan ainutlaatuista taidetta edustamaan virastoa.

Ei kuitenkaan vain kuvitukset tekevät tästä verkkosivustosta merkittävän - interaktiiviset animaatiot todella herättävät sen eloon. Jotkut kuvista ovat itse asiassa After Effectsin avulla luotuja videoita staattisten visuaalien sijaan, ja verkkosivustokomponentit, kuten sivupalkki, animoivat sujuvasti.

Sivusto on suunniteltu mobiililaitteita ajatellen, ja mobiililaitteiden vuorovaikutus heijastuu työpöydän kokemuksessa, jossa käyttäjä voi pyyhkäistä ohjauslevyn kanssa päästäkseen osioihin. Sivusto on rakennettu Modernizr-sovelluksella yhteensopivuuden varmistamiseksi ja jQuery vuorovaikutusta varten.

05. Conf-koodi

JavaScript-esimerkkejä: Code Conf

MacBook Pro -kannettavan kannet ovat 13 tuuman
Code Conf: n Nashvilleteemainen sivusto

CodeConfin sivusto ylittää todellisen konferenssisivuston. Konferenssi pidettiin Nashvillessä, Tennessee, ja kaikki tämä muotoilu kunnioittaa tätä paikkaa.

Itse verkkosivusto on mukavasti reagoiva ja sillä on lämmin, yhtenäinen väripaletti. Hupaisa kuvitus antaa sivustolle luonteen ja luo leikkisän country-rock-estetiikan, joka jatkuu koko sivulla (ja jopa itse tapahtumaan).

Mitään yksityiskohtia ei säästetä, koska jopa valikon koristeelliset vaakasäännöt (näkyvät vain pienemmissä ruuduissa) kulkevat country-rock-estetiikan kanssa. Sivusto toteuttaa Google Maps for location -ominaisuudet, ja se on rakennettu jQueryn ja AngularJS: n avulla.

Kaikki on havainnollistettu: kaikki paikat, puhujien 'luettelo', toimintakehotus lippujen ostamiseen ja tauot jaksojen välillä. Sivuston ympärillä on myös hauska joukko hahmoja: vektorikaktukset, yksisarviset, lohikäärmeet, oktokatit ja cowboyt ja tytöt, jotka soittavat musiikkia ja poseeraa leikkisästi sivun ympäri.

06. IBM Design

JavaScript-esimerkkejä: IBM Design

IBM Designin sivusto on saanut inspiraationsa fyysisestä maailmasta digitaalisen sijaan

Viime vuosina IBM on investoinut suunnitteluohjelman kasvattamiseen ja ohjaamaan yritystä kohti ihmiskeskeistä lähestymistapaa ohjelmistojen luomiseen. Se julkaisi äskettäin IBM Design Language -kielen, joka sisältää päivityksen sen animaatio-sanastoon. Se tarjoaa suunnitteluohjeita ja resursseja verkkokehittäjille, kaikki avoimet lähteet GitHubista.

Rakastan tätä animaatiopäivitystä (jopa enemmän kuin se, että se on avointa lähdettä) on se, kuinka studio tarkastelee inspiraatiota IBM: n perintöön ja fyysiseen maailmaan muiden digitaalisten ominaisuuksien sijaan. Hayley Hughes, IBM: n suunnittelukielen johtaja, kertoo, että tiimi sai inspiraation koneista; erityisesti niiden kiinteät tasot, fyysinen massa ja jäykät pinnat.

'Painovarren voimakkaasta iskusta kirjoituskoneen vaunun sujuvaan liukumiseen jokainen liike oli tarkoituksenmukainen ja suunniteltu tarkoituksella', hän selittää. 'Ohjelmistomme vaatii samaa huomiota yksityiskohtiin, jotta tuotteet tuntuvat vilkkailta ja realistisilta.'

Miksi animaatio on niin kriittinen IBM: n suunnittelukielelle? 'Aivan kuten henkilön kehon kieli auttaa lukemaan keskustelua, animaatio välittää kriittistä tietoa, joka auttaa käyttäjiä ymmärtämään tuotteidemme navigointia ja käyttöä', Hughes sanoo.

07. Masi Tupungato

JavaScript-esimerkkejä: Masi Tupungato

Kuvajohtoinen sivusto italialaiselle viininvalmistusprojektille Masi Tupungato

Tämä upea verkkosivusto kansainväliseltä digitaalisen luovuuden toimistolta Tämä Masi Tupungatolle, joka perustuu Italiassa sijaitsevaan viininvalmistusprojektiin, melkein annetaan kuvien puhua puolestaan.

Jokaiselle sivulle käytetään epätavallista latausnäyttöä, kun terävät koko näytön kuvat latautuvat. Yleensä tämä olisi iso ei-ei - käyttäjät haluavat sisällön mahdollisimman pian. Tässä se kuitenkin parantaa käyttäjän kokemusta varmistamalla, että kuvat ladataan kokonaan ennen kuin sisältöä paljastetaan. Suunnittelu luo empatian tunteen, jolloin käyttäjät tuntevat olonsa viinitilalla ja poiminut rypäleet itse.

Sivusto voi olla joillakin sivuilla raskas puoli (vaihtelevat 1,2 Mt - 5 Mt painossa), jota voitaisiin parantaa ottamalla käyttöön joitain laiskoja lataustekniikoita. Painostaan ​​huolimatta sivusto on hyvin rakennettu, ja aloitusrenderöinti on alle sekunnin ja paluuvierailut ladataan myös toisen merkin sisällä. Kehys perustuu unsemantic.com-sivustoon, joka on 960 Grid -järjestelmän seuraaja.

Katsellessaan sivustoa työpöydällä ja suuremmissa näkymissä käyttäjät voivat nähdä ja olla vuorovaikutuksessa kunkin viinin kanssa erikseen. He voivat hyödyntää suurempaa näytön kokoa näyttääksesi kaikki viinin ominaisuudet ja yksityiskohdat vierekkäin. Sen sijaan mobiilisivustolla yksityiskohdat ja kuvaus liukuvat sisään ja ne voidaan liu'uttaa jälleen sujuvasti.

08. tota11y

JavaScript-esimerkkejä: tota11y

tota11y tekee saavutettavuudesta yksinkertaisempaa

Helppokäyttöisten verkkosivustojen tekeminen on kriittisen tärkeää. Kuitenkin tekniikat ja testaus näyttävät usein vaativan syvää erikoistumista, joka voi saada web-kehittäjät ja suunnittelijat tuntemaan olevansa poissaolevia.

Kirjoita tota11y: yksinkertainen työkalu, joka voidaan sisällyttää JavaScript-tiedostona sivulle tai, vielä yksinkertaisemmin, käyttää kirjanmerkkinä millä tahansa sivustolla. Se merkitsee sivun kohteet, jotka ovat esteettömiä esteettömyysohjeille - matala visuaalinen kontrasti tai puuttuvat kuvien tekstivaihtoehdot, esimerkiksi.

Wayward-elementit on merkitty visuaalisesti, mikä helpottaa näytön napauttamista ja näyttää tiimin jäsenille tai asiakkaille tarkalleen mitä ongelmat ovat, kun taas laajennetut selitykset ohjaavat käyttäjiä menetelmistä ongelmien korjaamiseksi nopeasti.

Khan-akatemia Tota11yn verkkosivusto ei ole avoimesti lumoava, mutta tärkeä työ ei kuitenkaan aina ole hohtavaa. Tekstin yksinkertaisuus - sekä ulkonäöltään että sisällöltään - kyseenalaistaa ongelman monimutkaisuuden, jota työkalu itse pyrkii lieventämään.

09. Tunne Lupus

JavaScript-esimerkkejä: Tunne Lupus

Know Lupus -sivusto tutkii tilaa hauskalla ja informatiivisella tavalla

Amerikan Lupus-säätiö (LFA) on kansallinen järjestö, joka pyrkii ratkaisemaan lupuksen mysteerin. kukoistaa yhteistyössä LFA: n kanssa pro bono -valistushankkeessa, jonka tarkoituksena on auttaa suurta yleisöä ymmärtämään tauti.

'LFA halusi luoda hauskan mutta informatiivisen pelin, joka auttaisi kouluttamaan yleisöä kiinnostavalla tavalla, auttamaan ongelman voittamisessa' ', kertoo UX-suunnittelija ja projektijohtaja Laura Sweltz. 'Suunnitteluprosessissamme keskityttiin tämän tavoitteen saavuttamiseen ja samalla luotiin jotain, jonka lupusta sairastavat ihmiset todella tuntisivat olevansa innoissaan jakamisesta.'

Vigetin ratkaisu oli kasinohenkinen korttipeli, joka rakennettiin Reactin avulla, ja jokainen kortti tuo esiin faktan lupuksesta. Suunnittelija Blair Culbrethin mukautetut kuvitukset pitävät pelin kevyenä ja käsittelevät vakavaa aihetta. Kasinohenkiset äänitehosteet kutovat peliä.

Animaatiot ovat sileitä ja röyhkeitä, mikä lisää peliin uuden kerroksen iloa. Mobiilikokemus on yhtä interaktiivinen kuin työpöytä, ja reagoivat siirtymät on otettu täysin huomioon. Lopputulos on leikkisä kokemus, joka saa oppimisen tuntumaan vaivattomalta.

10. Vene

JavaScript-esimerkkejä: Vene

Vene, graafinen online-romaani

Pitkäkestoinen tarinankerronta on jatkuvasti kasvanut suosiota uutis- ja media-sivustoissa, mutta lähetysverkossa SBS Nam Le -tarinaan perustuva graafinen online-romaani The Boat tuntuu ainutlaatuiselta sekä tyyliltään että toteutukseltaan. Sumi-mustekuvat, ammattitaitoisesti toteutetut animaatiot ja viileä äänimaisema vangitsevat tarinan nuoren vietnamilaisen pakolaisen matkasta.

Tarinan elävöittämiseksi kuvittaja Matty Huynh vietti kuusi kuukautta Nam Lein alkuperäisen proosan kanssa, luonnosteli pikkukuvia ja loi iteratiivisesti hahmoja.

'Luulen, että näkemäsi tasapaino tulee tästä pitkitetystä kehitysjaksosta', kertoo tuottaja Kylie Boltin. '' Syvä sisäänpäin suuntautunut jakso antoi ydinryhmän jäsenille mahdollisuuden tietää tarina nurinpäin. Tiesimme, että tarina lyö ja tiesimme, mitkä hetket on korostettava. Ohjaavana periaatteena oli täydentää ydinkertomusta sen sijaan, että se voittaisi sen tai lisäisi elementin vain sen vuoksi. ''

Graafiset paneelit tuntuvat päiväkirjapiirroksilta - kiireellisiä, epätäydellisiä ja syvästi tunnepitoisia. Tämä sivusto osoittaa, kuinka voimakas ja kiinnostava tarinankerronta verkossa voi olla oikeissa käsissä.

yksitoista. Run4Tiger

JavaScript-esimerkkejä: Run4Tiger

Voitko juosta yhtä paljon kuin tiikeri? Ota selvää tämän sivuston ja käynnissä olevan sovelluksen avulla

Moskovassa Nälkäiset pojat Suunnitteli tämän näyttelypysähdyskampanjasivuston Venäjän Maailman villieläinrahastolle lisäämään yleisön tietoisuutta Save The Tiger -kampanjastaan. Miksi kilpailla kavereidesi kanssa, kun voit kilpailla GPS-seuratulla Amur-tiikerillä?

Sivuston avulla voit synkronoida valitsemasi käynnissä olevan sovelluksen (se tukee tällä hetkellä yhdeksää eri sovellusta!) Ja asettaa sinut ja muut juoksijat isoa kissaa vastaan, joka on keskimäärin 20 km päivässä. Jos tiikeri voittaa sinut, lahjoitat 5 dollaria WWF: lle.

Se on hieno konsepti, ja sen mukana on loistava muotoilu. Terävä musta ja keltainen väripaletti - joka ei ole tyypillisesti rohkea hyväntekeväisyyssovellukselle - välittää Save The Tiger -aloitteen kiireellisyyden.

Run4Tigerin luoja Ksenia Apresyan kertoo, että tiimillä oli ehdottomasti mielessä liikkuminen suunnittelussa: 'Halusimme tehdä verkkosivustosta niin dynaamisen kuin se voisi olla. Siksi päätimme käyttää uusinta tekniikkaa ja näyttää pääsivullamme dynaamisista hiukkasista koostuvan pääviestin. '

Seuraava sivu: 10 muuta parasta esimerkkiä JavaScriptistä inspiroimaan sinua ...

  • 1
  • kaksi

Tämänhetkinen sivu: Sivu 1

Seuraava sivu Sivu 2