21 populiariausias „JavaScript“ pavyzdys

Puslapis 1 iš 2: Puslapis 1

„JavaScript“ sukuria platformas, kurios gali pritraukti vartotoją ir užtikrinti, kad jie prisimintų jūsų svetainę ir toliau lankytųsi. Jis gali būti naudojamas kuriant žaidimus, API, slinkimo galimybes ir daug daugiau.

Internetas pilnas interneto dizaino įkvėpimas , įskaitant puikius „JavaScript“, naudojamo norint atgaivinti svetainę ir suteikti puikią vartotojo patirtį, pavyzdžius. Jūsų įkvėpimui mes pasirenkame keletą mėgstamiausių „JavaScript“ pavyzdžių.

01. Histografija

Histografija yra nuostabus būdas ištirti 14 milijardų metų daiktus



Histografija yra nuostabus būdas ištirti 14 milijardų metų daiktus

Jei kada nors žiūrėjote „Cosmos“, galite prisiminti, kad Carlas Saganas kalbėjo apie „Kosminį kalendorių“. Jei visatos amžius būtų sutrumpintas vieneriems metams, užfiksuota žmonijos istorija tilptų į paskutines gruodžio 31-osios sekundes.

14 milijardų metų įvykiai yra didžiulis duomenų rinkinys, o jo rodymas naršyklėje nėra lengva užduotis. Tačiau dizaineris ir kūrėjas Matanas Stauberis susidūrė su iššūkiu, nors net jis nebuvo tikras, kad tai bus įmanoma: „Manau, kad pagrindinė kliūtis turėtų būti proporcijos“, - aiškina jis. 'Kaip sukurti laiko juostą, kai 99,9 proc. Žinomos istorijos turės būti sutelkta mažiau nei į vieną ekrano pikselį?'

Istoriko sūnus Stauberis sukūrė histografiją kaip Bezalelio dailės ir dizaino akademijos studentas, vadovaujamas Ronelio Moro. „Jei galvojame apie tai, kaip žmonės vizualizuoja istoriją, laiko juostos yra turbūt dažniausiai pasitaikančios, ir vis dėlto jos daug nepasikeitė nuo spausdinto popieriaus laikų“, - sako jis. „Pamačiau tai kaip įdomią dizaino galimybę, ypač šiandien, kai suteikiama prieiga prie didžiųjų duomenų šaltinių.“

Svetainė nuskaito ir indeksuoja įvykius iš „Wikipedia“, sugriebia straipsnį ir įtraukia „Google“ vaizdą bei „YouTube“ vaizdo įrašą. Duomenis lengva rasti ir juos malonu vartoti. Jei kada nors praleidote valandas tyrinėdami Vikipedijos straipsnius, skirkite daug laiko šiam straipsniui.

02. Filippo Bello

„Adoratorio“ nusprendė naudoti CSS3 ir „Javascript“, o ne „WebGL“, kad suteiktų gilumo jausmą

Šis internetinis portfelis, demonstruojantis italų 3D menininko Filippo Bello talentą, buvo sukurtas, sukurtas ir išplėtotas viduje Adoratorija pateikė Enea Rossi ir Alessandro Rigobello. Komandai buvo suteikta visiška laisvė ją kurti.

Žaidimas su gilumu visoje svetainėje yra labai efektyvus - vaizdai lėtai juda link žiūrovo, sukuriant įspūdį, kad neriama į kiekvieną projektą. Tai pasiekiama naudojant vadinamąjį segmento efektą: fono paveikslėlis pakartojamas skirtingose ​​dėžutėse, kurios juda link žiūrovo. Komanda metė iššūkį vengdama akivaizdžiausių technologijų. „WebGL netinka visų tipų vartotojams“, - sako meno vadovas ir vienas iš įkūrėjų Rossi. 'Taigi pagrindinis šios svetainės iššūkis buvo suprasti, kaip pagilinti ekraną naudojant tik CSS3 ir' JavaScript 'kodo eilutes.'

Puslapio perėjimai ir nedideli vaizdų mastelio keitimo efektai yra puikus priedas prie galutinio rezultato, kuris, kaip Rossi apibūdina, buvo „absoliučiai viršija mūsų lūkesčius“.

03. Sent Luiso Brownas

Sent Luiso Browno svetainė sukurta kaip senovinė knyga

Ši svetainė apie Sent Luiso Browno beisbolo komandos istoriją, skaitmeninę agentūrą HLK sukūrė labai gražią patirtį. Svetainė skaitoma kaip gerai parengta senovinė knyga, kurią sudaro skyriai ir tekstūruota tipografija. Vartotojai gali slinkti kiekviename skyriuje, norėdami sužinoti apie istoriją pagal istoriją.

Svetainės įkvėpimo sėmėsi iš 1920-ųjų rankraščių ir reklamų, daugelis vaizdų buvo tiesiogiai iš tų metų, kuriuos jie apibūdina. Tai suteikia unikalų pasimatymą šiuolaikinėje, skaitmeninėje erdvėje. Tai papildo pilka ir ruda tonų spalvų schema, akcentuojama vieno oranžinio atspalvio.

Kai kurios mano mėgstamiausios šios svetainės dalys yra mažos detalės, tokios kaip meniu mygtukas (apskritas su mėsainių meniu viduje), kuris virsta beisbolo kamuoliu. Man taip pat patinka kairėje pusėje esanti laiko juosta, kuri seka ekraną ir atnaujina slinkdama.

Svetainė sukurta naudojant „Node.js“ ir „Express“ sistemą, kad būtų galima sklandžiai atnaujinti ir judėti tarp turinio.

04. Kojų darbo studija

„Leg Work Studio“ svetainėje naudojamos interaktyvios animacijos, kad patirtis būtų gyvesnė

Kojų darbas daro daug puikių darbų internete, nuo grafinio dizaino iki sąveikos ir žiniasklaidos. Taigi nenuostabu, kad savo asmeninė svetainė nėra išimtis. Studijos asmenybė išryškėja per linksmas, mišrios medijos iliustracijas. Jame derinami senoviniai nuotraukų efektai (pvz., Taškų tinklelio raštas) su skaitmeniniu būdu nudažytais baltais akcentais ir fizinio rašysenos nuskaitymais, kad būtų sukurtas unikalus menas, atstovaujantis agentūrai.

Tačiau šią svetainę pastebi ne tik iliustracijos - interaktyvios animacijos ją tikrai atgaivina. Kai kurios iliustracijos iš tikrųjų yra vaizdo įrašai, o ne statiniai vaizdai, sukurti naudojant „After Effects“, ir tokie svetainės komponentai, kaip šoninė juosta, sklandžiai animuojami.

Svetainė sukurta atsižvelgiant į mobilųjį telefoną, o sąveika mobiliaisiais yra atspindėta darbalaukyje, kur vartotojas gali perbraukti su takeliu, kad patektų į sekcijas. Svetainė sukurta naudojant „Modernizr“, kad būtų užtikrintas suderinamumas, ir „jQuery“ sąveikai.

05. Conf kodas

kaip naudotis riekelių įrankiu
„Code Conf“ svetainė Nešvilio tema

„CodeConf“ svetainė tikrai viršija standartinės konferencijos svetainę. Konferencija vyko Našvilyje, Tenesio valstijoje, ir viskas dėl šio dizaino pagerbia šią vietą.

Pati svetainė puikiai reaguoja ir turi šiltą, vientisą spalvų paletę. Įnoringos iliustracijos suteikia svetainei charakterio ir sukuria žaismingą country-rock estetiką, kuri tęsiasi visame puslapyje (ir net pačiame renginyje).

Negailima detalių, nes net meniu dekoratyvinės horizontalios taisyklės (matomos tik mažesniuose ekrano dydžiuose) sklinda su country-rock estetika. Svetainėje įdiegtos vietos nustatymo funkcijos „Google Maps“ ir sukurta naudojant „jQuery“ ir „AngularJS“.

Viskas pavaizduota: visos vietos, „nustatytas sąrašas“ kalbėtojų, raginimas veikti perkant bilietus ir pertraukos tarp skyrių. Taip pat yra įdomus veikėjų būrys, kurį galima rasti punktyru aplink svetainę: vektoriniai kaktusai, vienaragiai, drakonai, oktokatai ir kaubojai bei merginos, grojantys muziką ir žaismingai pozuojantys aplink puslapį.

06. „IBM Design“

„IBM Design“ svetainę įkvėpė fizinis pasaulis, o ne skaitmeninis

Per pastaruosius kelerius metus IBM investavo į projektavimo programos plėtrą ir įmonės orientavimą į žmogų orientuotą požiūrį į programinės įrangos kūrimą. Neseniai jis pasirodė su „IBM Design Language“, kuriame yra animacijos žodyno atnaujinimas. Joje pateikiamos žiniatinklio kūrėjų projektavimo gairės ir ištekliai, visi pateikiami iš „GitHub“.

Man patinka šis animacijos atnaujinimas (net labiau nei tai, kad jis yra atviras) yra tai, kaip studija įkvėpimo žvelgia į IBM paveldą ir fizinį pasaulį, o ne į kitas skaitmenines savybes. Hayley Hughesas, vadovaujantis IBM dizaino kalbai, sako, kad komanda įkvėpimo sėmėsi iš mašinų; visų pirma jų tvirtos plokštumos, fizinė masė ir standūs paviršiai.

„Nuo galingo spausdinimo rankos smūgio iki sklandaus rašomosios mašinėlės vežimėlio slydimo - kiekvienas judesys buvo tikslus ir sukurtas tyčia“, - paaiškina ji. „Mūsų programinė įranga reikalauja tokio pat dėmesio detalėms, kad produktai jaustųsi gyvi ir realistiški.“

Kodėl animacija yra tokia kritinė IBM dizaino kalbai? „Kaip žmogaus kūno kalba padeda perskaityti pokalbį, animacija perduoda svarbią informaciją, kuri padeda vartotojams suprasti, kaip naršyti ir naudoti mūsų produktus“, - sako Hughesas.

07. Masi Tupungato

Italijos vyno gamybos projekto „Masi Tupungato“ įvaizdžio vedama svetainė

Ši nuostabi tarptautinės kūrybos agentūros svetainė Tai Italijoje įsikūrusiam vyno gamybos projektui Masi Tupungato beveik leidžia vaizdai kalbėti patys už save.

Neįprasta, kai kraunami ryškūs viso ekrano vaizdai, kiekvienam puslapiui naudojamas įkėlimo ekranas. Paprastai tai būtų didelis ne-ne - vartotojai nori turinio kuo greičiau. Tačiau čia jis iš tikrųjų pagerina vartotojo patirtį užtikrindamas, kad vaizdai būtų visiškai įkeliami prieš pristatant bet kokį turinį. Dizainas sukuria empatijos jausmą, paliekant vartotojams jausmą, kad jie jau buvo vyno gamykloje ir patys skynė vynuoges.

Kai kuriuose puslapiuose svetainė gali būti sunkioji (svyruoja nuo 1,2 MB iki 5 MB svorio), kurią būtų galima patobulinti įvedus keletą tingių įkėlimo būdų. Nepaisant savo svorio, svetainė yra gerai sukonstruota, pradžia pateikiama per mažiau nei vieną sekundę, o apsilankymai grįžta į antrąjį ženklą. Ši sistema yra pagrįsta „unsemantic.com“, kuri yra „960 Grid“ sistemos perėmėja.

Žiūrėdami svetainę darbalaukyje ir didesnėse peržiūros vietose, vartotojai gali atskirai pamatyti ir bendrauti su kiekvienu iš vynų. Jie gali pasinaudoti didesniu ekrano dydžiu ir kartu parodyti visas vyno savybes ir išsamią informaciją. Priešingai, svetainėje mobiliesiems išsami informacija ir aprašymas slenka ir vėl gali būti sklandžiai atitolinti.

08. tota11y

tota11y palengvina prieinamumą

Nepaprastai svarbu padaryti prieinamas svetaines. Tačiau dažnai atrodo, kad tam reikalingos technikos ir bandymai reikalauja gilios specializacijos, dėl kurios interneto kūrėjai ir dizaineriai gali pasijusti pasislinkę.

Įveskite tota11y: paprastas įrankis, kurį galima įtraukti kaip „JavaScript“ failą į puslapį arba, dar paprasčiau, naudoti kaip žymelę bet kurioje svetainėje. Tai pažymi puslapyje esančius elementus, kurie pažeidžia pritaikymo neįgaliesiems gaires - žemas vizualinis kontrastas arba trūksta tekstinių vaizdų alternatyvų, tarkim.

Veidingi elementai pažymimi vizualiai, todėl lengva užfiksuoti ekrano griebimą ir parodyti komandos nariams ar klientams tiksliai, kokios yra problemos, o išplėstuose paaiškinimuose vartotojai mokomi metodų, kaip greitai pašalinti trikdžius.

Khano akademija „tota11y“ svetainė nėra atvirai žavinga, tačiau tada svarbus darbas ne visada yra blizgus. Verslo požiūriu paprastas tekstas - tiek išvaizdos, tiek turinio atžvilgiu - paneigia problemos, kurią pati priemonė siekia palengvinti, sudėtingumą.

09. Pažinkite Vilkę

„Know Lupus“ svetainėje ši būklė nagrinėjama linksmai ir informatyviai

Amerikos vilkligės fondas (LFA) yra nacionalinė organizacija, siekianti išspręsti vilkligės paslaptį. klesti bendradarbiavo su LFA vykdydamas pro bono visuomenės informavimo projektą, kuris padėtų plačiajai visuomenei suprasti ligą.

„LFA norėjo sukurti įdomų, tačiau informatyvų žaidimą, kuris padėtų patraukliai šviesti visuomenę, padėtų įveikti šią problemą“, - aiškina Laura Sweltz, „UX“ dizainerė ir projekto vadovė. 'Mūsų projektavimo procesas buvo sutelktas į šio tikslo įgyvendinimą, kartu sukuriant tai, ką žmonės, sergantys vilklige, iš tikrųjų jaustųsi susijaudinę dalindamiesi'.

„Viget“ sprendimas buvo kazino įkvėptas kortų žaidimas, sukurtas naudojant „React“, kuriame kiekviena kortelė pabrėžia faktą apie vilkligę. Dizainerio Blairo Culbretho pasirinktinės iliustracijos išlaiko žaidimą lengvabūdišką, nagrinėjant rimtą temą. Kazino įkvėpti garso efektai perveria žaidimą.

Animacijos yra sklandžios ir linksmos, suteikiančios žaidimui dar vieną malonumo sluoksnį. Mobilusis ryšys yra toks pat interaktyvus kaip ir darbalaukis, todėl reaguojant į perėjimus buvo visiškai atsižvelgta. Galutinis rezultatas - žaisminga patirtis, leidžianti mokytis jaustis be vargo.

10. Laivas

„Valtis“ - internetinis grafinis romanas

„Longform“ pasakojimai nuolat populiarėjo naujienų ir žiniasklaidos svetainėse, tačiau transliavimo tinkle SBS Internetinis grafinis romanas „The Boat“, sukurtas pagal Nam Le istoriją, jaučiasi unikalus tiek savo stiliumi, tiek atlikimu. „Sumi“ rašalo iliustracijos, profesionaliai atliktos animacijos ir šiurpinantis garsovaizdis užfiksuoja jauno Vietnamo pabėgėlio kelionės istoriją.

Norėdami atgaivinti istoriją, iliustratorius Matty Huynh šešis mėnesius praleido kartu su originalia Nam Le proza, apybraižydamas miniatiūras ir kartodamas kurdamas veikėjus.

„Manau, kad jūsų matoma pusiausvyra kyla iš šio ilgesnio vystymosi laikotarpio“, - aiškina prodiuseris Kylie Boltinas. „Tas gilus į vidų žvelgiantis laikotarpis leido pagrindiniams komandos nariams sužinoti istoriją iš vidaus. Žinojome, kad istorija plaka ir žinome, kurias akimirkas reikia pabrėžti. Pagrindinis principas buvo papildyti pagrindinį pasakojimą, o ne užgožti jį ar pridėti elementą vien dėl to “.

Grafinės plokštės jaučiasi kaip dienoraščio eskizai - skubūs, netobuli ir giliai emocingi. Ši svetainė įrodo, koks galingas ir patrauklus internetinis pasakojimas gali būti tinkamose rankose.

vienuolika. „Run4Tiger“

Ar galite bėgti tiek, kiek tigras? Sužinokite apie šią svetainę ir veikiančią programą

Maskvoje įsikūrusi Alkani berniukai suprojektavo šią parodomąją kampanijos svetainę Pasaulio laukinės gamtos fondui Rusijai, kad padidintų visuomenės informuotumą apie savo kampaniją „Save The Tiger“. Kodėl verta lenktyniauti su draugais, kai galite lenktyniauti GPS vikšriniu amūro tigru?

Ši svetainė leidžia jums sinchronizuoti pasirinktą veikiančią programą (šiuo metu ji palaiko devynias skirtingas programas!) Ir supriešina jus ir kitus bėgikus su dideliu katinu, kuris vidutiniškai siekia 20 km per dieną. Jei tigras muša tave, paaukoji 5 USD WWF.

Tai puiki koncepcija, prie kurios pridedamas puikus dizainas. Aštri juodos ir geltonos spalvų paletė - nebūdinga paryškinti labdaros programai - reiškia „Save The Tiger“ iniciatyvos skubumą.

„Run4Tiger“ kūrėja Ksenia Apresyan teigia, kad kurdama komandą komanda tikrai turėjo omenyje judėjimą: „Mes norėjome padaryti svetainę kuo dinamiškesnę. Štai kodėl nusprendėme naudoti naujausias technologijas ir pagrindiniame puslapyje parodyti savo pagrindinę žinutę, sudarytą iš dinaminių dalelių “.

Kitas puslapis: dar 10 geriausių „JavaScript“ pavyzdžių, kurie jus įkvėps ...

  • 1
  • du

Dabartinis puslapis: Puslapis 1

Kitas puslapis 2 puslapis