21 legfontosabb példa a JavaScript-re

1/2 oldal: 1 oldal

A JavaScript olyan platformokat hoz létre, amelyek bevonhatják a felhasználókat, és biztosíthatják, hogy emlékezzenek az Ön webhelyére, és folytassák a látogatást. Használható játékok, API-k, görgetési képességek és még sok más létrehozására.

Az internet tele van webdesign inspiráció , beleértve a JavaScript használatának nagyszerű példáit, amelyek segítségével egy weboldal életre kelhet és nagyszerű felhasználói élményt nyújt. Itt válogathatunk néhány kedvenc JavaScript-példát az Ön inspirációjára.

01. Szövettan

A hisztográfia csodálatos módja annak, hogy felfedezzék a 14 milliárd éves dolgokat



A hisztográfia csodálatos módja annak, hogy felfedezzék a 14 milliárd éves dolgokat

Ha valaha is nézte a Kozmoszt, emlékezhet arra, hogy Carl Sagan a Kozmikus Naptárról beszélt. Ha a világegyetem korát egy évre sűrítenék, akkor az emberi feljegyzett történelem beleférne december 31-i utolsó másodpercekbe.

A 14 milliárd éves események hatalmas adathalmazok, és a böngészőben való megjelenítés nem könnyű feladat. De a tervező és a fejlesztő, Matan Stauber szembeszállt a kihívással - bár még abban sem volt biztos, hogy lehetséges-e: „Úgy gondolom, hogy a fő akadálynak az arányoknak kell lenniük” - magyarázza. 'Hogyan hozhat létre idővonalat, amikor az általunk ismert előzmények 99,9 százalékát a képernyő kevesebb, mint egy képpontjába kell tömöríteni?'

Stauber, egy történész fia Ronel Mor irányításával a Bezaleli Művészeti és Művészeti Akadémia hallgatójaként készítette a hisztográfiát. 'Ha arra gondolunk, hogy az emberek hogyan vizualizálják a történelmet, akkor valószínűleg az idővonalak a leggyakoribbak, és mégsem változtak sokat a nyomtatott papírok napja óta' - mondja. 'Ezt izgalmas tervezési lehetőségnek tekintettem, különösen manapság a nagy adatforrásokhoz való hozzáféréssel.'

A webhely beolvassa és indexeli a Wikipedia eseményeit, megragadja a cikket, és behúz egy Google-képet és YouTube-videót. Az adatok könnyen felfedezhetők és öröm a fogyasztásuk. Ha már órákat vesztett a Wikipédia cikkeinek felfedezéséből, szánjon erre sok időt.

02. Filippo Bello

Az Adoratorio a CSS3 és a Javascript használatát választotta a WebGL helyett, hogy a mélység érzetét keltse

Az Adoratorio a CSS3 és a Javascript használatát választotta a WebGL helyett, hogy a mélység érzetét keltse

Ezt az online portfóliót, amely Filippo Bello olasz 3D-s művész tehetségét mutatja be, belső téren tervezték, tervezték és fejlesztették Adoratorio írta Enea Rossi és Alessandro Rigobello. A csapat teljes szabadságot kapott a tervezésében.

A weboldal mélységével végzett játék nagyon hatékony - a képek lassan mozognak a néző felé, és az egyes projektekbe merülés benyomását kelti. Ezt úgy lehet elérni, hogy az úgynevezett szegmenshatást használjuk: a háttérképet különféle mezőkben replikálják, amelyek a néző felé mozognak. A csapat a legkézenfekvőbb technológiák elkerülésével kihívta magát. 'A WebGL nem alkalmas mindenféle felhasználó számára' - mondja Rossi, művészeti igazgató és társalapító. 'Tehát ennek a webhelynek a legfőbb kihívása az volt, hogy megértse, miként mélyítheti el a képernyőt csak CSS3 és JavaScript kód-karakterláncok használatával.'

Az oldalátmenetek és a képeken található kis zoom-effektusok szép hozzáadást jelentenek a végeredményhez, ami - ahogy Rossi leírja - „teljesen felülmúlta a várakozásainkat”.

03. A St. Louis Browns

JavaScript példák: St. Louis Browns

A St. Louis Browns oldala vintage könyv stílusú

Ezen a weboldalon a St. Louis Browns baseballcsapat, digitális ügynökség történetéről HLK nagyon szép élményt készített. A webhely jól kidolgozott vintage könyvként olvasható, fejezetekkel és texturált tipográfiával kiegészítve. A felhasználók végiglapozhatják az egyes fejezeteket, hogy időalapú, történetszerű élményt kapjanak.

Az oldal inspirációját az 1920-as évek kéziratai és reklámjai merítették, sok kép közvetlenül az általuk leírt évekből származik. Ez egyedülállóan kelt érzetet kelt a modern, digitális térben. Ezt egészíti ki egy szürke-barna tónusú színvilág, amelyet a narancs egyetlen árnyalata hangsúlyoz.

Néhány kedvenc részem ezen a webhelyen az apró részletek, például a menü gomb (kör alakú, benne hamburger menü), amely lebegéssé konvertál. Szeretem a bal oldali idővonalat is, amely követi a képernyőt és frissíti a görgetést.

A webhely a Node.js és az Express keretrendszer használatával épül fel, hogy lehetővé tegye a zökkenőmentes frissítést és a tartalom közötti áramlást.

04. Leg Work Studio

JavaScript példák: Lábmunka

A Leg Work Studio weboldala interaktív animációkkal hívja életre az élményt

Lábmunka sok nagyszerű munkát végez az interneten, a grafikai tervezéstől az interakcióig és a médiáig. Tehát nem meglepő, ha azt tapasztaljuk, hogy a saját személyes oldala sem kivétel. A stúdió személyisége szórakoztató, vegyes technika segítségével illusztrálódik. Ötvözi a szüreti fotóeffektusokat (például a pontrácsmintát) a digitálisan festett fehér akcentussal és a fizikai kézírás beolvasásával, hogy egyedi művészetet alkosson az ügynökség képviseletében.

Azonban nemcsak az illusztrációk teszik figyelemre méltóvá ezt a weboldalt - az interaktív animációk valóban életre hívják. Az illusztrációk némelyike ​​valójában statikus látvány helyett videók, az After Effects segítségével készült, és az olyan weboldal-összetevők, mint az oldalsáv, simán animálódnak.

A webhelyet a mobilra való tekintettel tervezték, és a mobil interakciók tükröződnek az asztali környezetben, ahol a felhasználó végiglapozhatja a nyomógombot a szakaszok átjutásához. A weboldal a Modernizr segítségével készült, hogy biztosítsa a kompatibilitást, és a jQuery az interakciókhoz.

05. Conf Code

JavaScript példák: Code Conf

Code Conf Nashville-témájú webhelye

A CodeConf webhelye valóban meghaladja a szokásos konferencia-weboldalt. A konferenciát a tennessee-i Nashville-ben tartották, és a tervezéssel kapcsolatos minden tiszteleg ennek a helyszínnek.

Maga a weboldal szépen reagál és meleg, összetartó színpalettával rendelkezik. A szeszélyes illusztrációk karaktert adnak az oldalnak, és játékos country-rock esztétikát teremtenek, amely folytatódik az egész oldalon (sőt magában az eseményben is).

Nem kíméljük a részleteket, mivel még a menü dekoratív vízszintes szabályai is (csak kisebb képernyőméreteknél láthatók) a country-rock esztétikával folynak. A webhely a Google Maps for location funkciókat valósítja meg, és a jQuery és az AngularJS segítségével épül fel.

Mindent szemléltetünk: az összes helyszínt, az előadók „meghatározott listáját”, a cselekvésre való felhívást a jegyek vásárlásához és a szakaszok közötti szüneteket. Van egy szórakoztató szereplőgárda is, amely pontozottan található az oldalon: vektorkaktuszok, egyszarvúak, sárkányok, oktatok, valamint cowboyok és lányok, akik zenélnek és játékosan pózolnak az oldalon.

06. IBM Design

JavaScript példák: IBM Design

Az IBM Design webhelyét a fizikai világ inspirálta, szemben a digitáliséval

Az elmúlt években az IBM egy tervezési program fejlesztésébe fektetett be, és a szoftvert emberközpontú megközelítés felé irányította a társaság felé. Nemrégiben jelent meg az IBM Design Language, amely az animációs szókincsének frissítését tartalmazza. Tervezési útmutatást és forrásokat biztosít a webfejlesztők számára, mindezek nyílt forráskódúak a GitHub-on.

Szeretem ezt az animációs frissítést (még inkább azt, hogy nyílt forrásból származik), hogy a stúdió az IBM örökségét és a fizikai világot nézi inspirációként, más digitális tulajdonságok helyett. Hayley Hughes, az IBM tervezőnyelv vezetője szerint a csapat ihletet merített a gépekből; különösen szilárd síkjaik, fizikai tömegük és merev felületek.

'A nyomtatókar erőteljes ütésétől az írógép kocsi sima csúsztatásáig minden mozdulat célnak megfelelő és szándékosan volt megtervezve' - ​​magyarázza. 'Szoftvereink ugyanolyan figyelmet igényelnek a részletekre, hogy a termékek élénkek és reálisak legyenek.'

Miért kritikus az animáció az IBM tervezési nyelve szempontjából? 'Ahogy az ember testbeszéde segít elolvasni a beszélgetést, az animáció kritikus információkat közöl, amelyek segítenek a felhasználóknak megérteni, hogyan kell navigálni és használni termékeinket' - mondja Hughes.

07. Masi Tupungato

JavaScript példák: Masi Tupungato

Képvezérelt webhely a Masi Tupungato olasz borászati ​​projekt számára

Ez a csodálatos weboldal a nemzetközi digitális kreatív ügynökségtől Ez mert Masi Tupungato, egy olaszországi borászati ​​projekt szinte engedi, hogy a kép magáért beszéljen.

Szokatlan módon minden oldalhoz betöltőképernyőt használnak, amikor a tiszta, teljes képernyős képek betöltődnek. Általában ez nagy nem-nem lenne - a felhasználók a lehető leghamarabb szeretnék a tartalmat. Azonban itt valóban javítja a felhasználói élményt azáltal, hogy a képek teljes feltöltése még a tartalom bemutatása előtt megtörténik. A kialakítás az empátia érzetét kelti, így a felhasználók úgy érzik, mintha a pincészetben jártak volna, és maguk szedték volna a szőlőt.

A webhely egyes oldalak nehéz oldalán állhat (1,2 MB-tól 5 MB-ig terjedően), amit néhány lusta betöltési technika bevezetésével lehetne javítani. Súlya ellenére azonban a helyszín jól fel van építve, az indítás egy másodperc alatt van, a visszatérő látogatások pedig a második jelzésen belül is betöltődnek. A keretrendszer az unsemantic.com-on alapul, amely a 960 Grid System utódja.

Az asztali és nagyobb nézetablakok megtekintésekor a felhasználók külön-külön láthatják és kezelhetik az egyes borokat. Kihasználhatják a nagyobb képernyőméretet, hogy egymás mellett jelenítsék meg a bor összes jellemzőjét és részleteit. Ezzel szemben a mobil webhelyen a részletek és a leírás becsúsznak, és ismét simán elcsúszhatnak.

08. tota11y

JavaScript példák: tota11y

A tota11y egyszerűbbé teszi az akadálymentességet

A hozzáférhető weboldalak létrehozása kritikus fontosságú. Az érintett technikák és tesztelések azonban gyakran úgy tűnik, hogy mély specializálódást igényelnek, ami a webfejlesztőknek és a tervezőknek érezheti, hogy ügyesek.

Írja be a tota11y szót: egy egyszerű eszköz, amely JavaScript fájlként szerepelhet egy oldalon, vagy még egyszerűbben bármely könyvjelzőként használható. Megjelöli azokat az elemeket az oldalon, amelyek ütköznek az akadálymentességi irányelvekkel - például alacsony vizuális kontraszt vagy hiányzó szöveges alternatívák a képekhez.

Az elutasított elemeket vizuálisan jelölik meg, megkönnyítve a képernyő megragadását, és megmutatva a csapattagoknak vagy az ügyfeleknek, hogy pontosan mi a probléma, míg a kibővített magyarázatok a felhasználókat ismertetik a hibák rövid elhárításának módszereivel.

Khan Akadémia A tota11y webhelye nem nyíltan elbűvölő, de a fontos munka nem mindig csillogó. A szöveg üzleti szempontból egyszerű egyszerűsége - mind megjelenésében, mind tartalmában - meghazudtolja a probléma összetettségét, amelyet maga az eszköz kíván enyhíteni.

09. Ismerje Lupust

JavaScript példák: Ismerje Lupust

A Know Lupus webhely szórakoztató, informatív módon tárja fel az állapotot

Az Amerikai Lupus Alapítvány (LFA) egy nemzeti szervezet, amely a lupus rejtélyének feloldásán dolgozik. virágzik együttműködött az LFA-val egy pro bono közvélemény-felvilágosító projektben, amely a lakosság megértését segíti.

'Az LFA egy szórakoztató, mégis informatív játékot szeretett volna létrehozni, amely elősegítené a közönség vonzó módon történő oktatását, és segítene ennek a problémának a leküzdésében' - magyarázza Laura Sweltz, az UX tervezője és a projekt vezetője. 'Tervezési folyamatunk e cél megvalósítására összpontosított, miközben létrehoztunk valamit, amelyet a lupusban szenvedők valóban izgatottnak éreznének a megosztás miatt.'

A Viget megoldása egy kaszinó által inspirált kártyajáték volt, amelyet a React segítségével építettek, amelyben minden kártya kiemel egy tényt a lupusról. Blair Culbreth tervező egyedi illusztrációi könnyedén tartják a játékot, miközben foglalkoznak a súlyos témával. Kaszinó ihlette hanghatások szőik át a játékot.

Az animációk gördülékenyek és frappánsak, további örömréteget adva a játéknak. A mobil élmény ugyanolyan interaktív, mint az asztali számítógép, és az adaptív átmeneteket teljes mértékben figyelembe vették. A végeredmény egy játékos élmény, amely a tanulást könnyedén érzi.

10. A hajó

JavaScript példák: A hajó

A Hajó, online grafikus regény

A hosszú formájú mesemondás folyamatosan népszerűvé vált a hír- és médiaoldalakon, de a műsorszóró hálózaton SBS Nam Le történetén alapuló The Boat című online grafikus regény stílusában és kivitelezésében egyaránt egyedülállónak érzi magát. A Sumi festékillusztrációk, szakszerűen kivitelezett animációk és hűvös hangzásvilág egy fiatal vietnami menekült útjának történetét örökíti meg.

A történet életre keltése érdekében Matty Huynh illusztrátor hat hónapot töltött Nam Le eredeti prózájával, indexképeket rajzolt és iteratív módon alkotta meg a karaktereket.

'Úgy gondolom, hogy a mérleg, amelyet lát, ebből a hosszabb fejlesztési időszakból származik' - magyarázza Kylie Boltin producer. 'Ez a mélyen befelé forduló időszak lehetővé tette, hogy az alapcsapat tagjai kifelé megismerjék a történetet. Tudtuk, hogy a történet ver, és tudtuk, mely pillanatokat kell kiemelni. A vezérelv az volt, hogy kiegészítsék a történetmesélést, nem pedig elnyomják azt, vagy csak annak érdekében adnak hozzá egy elemet.

A grafikus panelek naplóvázlatoknak tűnnek - sürgősek, tökéletlenek és mély érzelmek. Ez az oldal bizonyítja, hogy az online mesemondás milyen hatékony és vonzó lehet a megfelelő kezekben.

tizenegy. Run4Tiger

JavaScript példák: Run4Tiger

Tud futni annyit, mint egy tigris? Tudja meg ezt a webhelyet és a futó alkalmazást

Moszkvai székhelyű Éhes fiúk az Oroszországi Vadon élővilág Alapja számára tervezte ezt a bemutató kampányt, hogy felhívja a közvélemény figyelmét a Save The Tiger kampányára. Miért versenyezzen a barátaival, amikor GPS-lánctalpas Amur tigrissel versenyezhet?

A webhely lehetővé teszi a kiválasztott futó alkalmazás szinkronizálását (jelenleg kilenc különböző alkalmazást támogat!), És szembeállítja Önt és más futókat a nagy macskával, amely átlagosan napi 20 km-t tesz meg. Ha a tigris megver, akkor $ 5-t adományoz a WWF-nek.

Remek koncepció, és remek dizájn is jár hozzá. Az éles fekete és sárga színpaletta - amely egy jótékonysági alkalmazás számára jellemzően merész - a Save The Tiger kezdeményezés sürgősségét közvetíti.

A Run4Tiger alkotója, Ksenia Apresyan szerint a csapatnak mindenképpen mozgásra volt szüksége a tervezés során: „A weboldalt a lehető legdinamikusabbá akartuk tenni. Ezért döntöttünk úgy, hogy a legfrissebb technológiákat alkalmazzuk, és a dinamikus részecskékből álló fő üzenetünket a főoldalon mutatjuk be. ”

Következő oldal: További 10 legfontosabb példa a JavaScript-ről, hogy inspirálja Önt ...

  • 1
  • két

Aktuális oldal: 1 oldal

Következő oldal 2. oldal