21 най-добри примера за JavaScript
Страница 1 от 2: Страница 1- Страница 1
- Страница 2
JavaScript създава платформи, които могат да ангажират потребител и да гарантират, че те запомнят вашия сайт и продължават да го посещават отново. Може да се използва за създаване на игри, API, способности за превъртане и много други.
Интернет е пълен с вдъхновение за уеб дизайн , включително страхотни примери за JavaScript, използван за оживяване на уебсайт и осигуряване на страхотно изживяване на потребителите. Тук избираме някои от любимите ни примери за JavaScript в действие за ваше вдъхновение.
01. Хистография
Ако някога сте гледали Космос, може би си спомняте как Карл Сейгън говори за Космическия календар. Ако възрастта на Вселената се съкрати в една година, записаната човешка история ще се побере в последните секунди на 31 декември.
14 милиарда години събития са огромен набор от данни и показването им в браузър не е лесна задача. Но дизайнерът и разработчикът Matan Stauber се справи с предизвикателството - въпреки че дори той не беше сигурен, че това ще бъде възможно: „Мисля, че основната пречка трябва да бъдат пропорциите“, обяснява той. „Как се създава времева линия, когато 99,9% от историята, която познаваме, ще трябва да бъде кондензирана в по-малко от един пиксел на екрана?“
Син на историк, Щубер създава хистография като студент в Академията за изкуство и дизайн Bezalel, под ръководството на Ронел Мор. „Ако помислим за начините, по които хората визуализират историята, сроковете са може би най-често срещаните и въпреки това те не са се променили много от дните на печатната хартия“, казва той. „Видях това като вълнуваща възможност за дизайн, особено днес с достъпа до източници на големи данни.“
Сайтът сканира и индексира събития от Уикипедия, хваща статията и изтегля изображение от Google и видеоклип в YouTube. Данните са лесно откриваеми и с радост за консумация. Ако някога сте губили часове, разглеждайки статии от Уикипедия, отделете достатъчно време за тази.
02. Филипо Бело
Това онлайн портфолио, показващо таланта на италианския 3D художник Филипо Бело, е замислено, проектирано и разработено вътрешно в Адоратория от Енеа Роси и Алесандро Ригобело. Екипът получи пълна свобода как да го проектира.
Играта с дълбочина в уебсайта е много ефективна - изображенията се движат бавно към зрителя, създавайки впечатлението за гмуркане във всеки проект. Това се постига с помощта на така наречения сегментен ефект: фоновото изображение се репликира в различни полета, които се придвижват към зрителя. Екипът се оспори, като избягва най-очевидните технологии. „WebGL не е подходящ за всеки вид потребители“, казва Роси, арт директор и съосновател. „Така че основното предизвикателство на този сайт беше да разбере как да задълбочи екрана само с кодови низове CSS3 и JavaScript.“
Преходите на страниците и малките ефекти на мащабиране върху изображенията са приятно добавено докосване към крайния резултат, който беше - както го описва Роси - „абсолютно извън нашите очаквания“.
03. Сейнт Луис Браунс
За този уебсайт за историята на бейзболния отбор на Сейнт Луис Браунс, дигитална агенция HLK е създал много красиво преживяване. Сайтът се чете като добре изработена ретро книга, пълна с глави и текстурирана типография. Потребителите могат да превъртат всяка глава, за да базират на времето, подобно на историята преживяване.
Вдъхновението за сайта е извлечено от ръкописи и реклами от 20-те години на миналия век, като много от изображенията са директно от годините, които те описват. Това носи уникално датирано усещане за едно модерно, дигитално пространство. Това се допълва от сиво-кафява тонизирана цветова схема, подчертана от един оранжев нюанс.
Някои от любимите ми части на този сайт са малките подробности, като например бутона за меню (кръгъл с меню за хамбургер вътре), който се превръща в бейзбол при задържане. Също така обичам времевата линия отляво, която следва екрана и актуализациите при превъртане.
Сайтът е изграден с помощта на Node.js и Express рамката, за да позволи плавно актуализиране и преминаване между съдържанието.
04. Студио за работа на крака
Работа на краката върши много страхотна работа в мрежата, от графичен дизайн до взаимодействие и медии. Затова не е изненадващо да се установи, че неговият личен сайт не е изключение. Личността на студиото прозира чрез забавни илюстрации със смесена медия. Той съчетава винтидж фотоефекти (като точкова решетка) с дигитално боядисани бели акценти и сканиране на физически почерк, за да създаде уникално изкуство, което да представлява агенцията.
Не само илюстрациите правят този уебсайт забележителен - интерактивните анимации наистина го оживяват. Някои от самите илюстрации всъщност са видеоклипове вместо статични визуални ефекти, създадени с After Effects, а компонентите на уебсайта като страничната лента анимират гладко.
Уебсайтът е проектиран с мисъл за мобилни устройства, а мобилните взаимодействия се отразяват в изживяването на работния плот, където потребителят може да прекара пръст с тракпада, за да премине през секциите. Уебсайтът е изграден с помощта на Modernizr за осигуряване на съвместимост и jQuery за взаимодействия.
05. Конф. Код
Сайтът за CodeConf наистина надхвърля стандартния уебсайт на конференцията. Конференцията се проведе в Нешвил, Тенеси и всичко по този дизайн отдава почит на това място.
Самият уебсайт е добре отзивчив и има топла, сплотена цветова палитра. Причудливите илюстрации придават на сайта характер и създават закачлива естетика на кънтри-рок, която продължава по цялата страница (и дори в самото събитие).
Не са спестени подробности, тъй като дори декоративните хоризонтални правила на менюто (виждат се само при по-малки размери на екрана) се съчетават с естетиката на кънтри-рок. Сайтът прилага Google Maps за функции за местоположение и е изграден с jQuery и AngularJS.
Всичко е илюстрирано: всички места, „списъкът с говорители“, призивът за действие за закупуване на билети и почивките между отделните секции. Има и забавен състав от герои, които могат да бъдат намерени изпъстрени около сайта: векторни кактуси, еднорози, дракони, октокоти и каубои и момичета, които пускат музика и позират игриво около страницата.
06. IBM Design
През последните няколко години IBM инвестира в разработване на програма за проектиране и насочване на компанията към човеко-ориентиран подход към създаването на софтуер. Наскоро излезе с IBM Design Language, който съдържа актуализация за своя анимационен речник. Той предоставя насоки за проектиране и ресурси за уеб разработчици, всички с отворен код на GitHub.
Това, което харесвам в тази актуализация на анимацията (дори повече от факта, че е с отворен код) е как студиото гледа на наследството на IBM и на физическия свят за вдъхновение, вместо на други цифрови свойства. Хейли Хюз, ръководител на езика за дизайн на IBM, казва, че екипът е черпил вдъхновение от машините; по-специално техните твърди равнини, физическа маса и твърди повърхности.
„От мощния удар на печатащото рамо до гладкото плъзгане на каретката за пишеща машина, всяко движение беше подходящо за целта и проектирано с намерение“, обяснява тя. „Нашият софтуер изисква същото внимание към детайлите, за да може продуктите да се чувстват оживени и реалистични.“
Защо анимацията е толкова важна за езика на дизайна на IBM? „Точно както езикът на тялото на човек ви помага да прочетете разговора, анимацията предава критична информация, която помага на потребителите да разберат как да навигират и да използват нашите продукти“, казва Хюз.
07. Маси Тупунгато
Този прекрасен уебсайт от международна дигитална творческа агенция Това за Masi Tupungato, проект за винопроизводство, базиран в Италия, почти позволява изображенията да говорят сами за себе си.
Необичайно се използва екран за зареждане за всяка от страниците, докато отчетливите изображения на цял екран се зареждат. Обикновено това би било голямо не-не - потребителите искат съдържанието възможно най-скоро. Тук обаче всъщност подобрява практическата работа на потребителя, като гарантира, че изображенията са напълно заредени, преди да бъде разкрито каквото и да е съдържание. Дизайнът създава усещане за съпричастност, оставяйки потребителите да се чувстват сякаш са били във винарната и са брали гроздето сами.
Сайтът може да бъде по-тежък на някои страници (вариращи от 1.2MB до 5MB тегло), което може да бъде подобрено чрез въвеждане на някои лениви техники за зареждане. Въпреки теглото си обаче, сайтът е добре изграден, като стартът се изобразява за по-малко от една секунда, а връщащите посещения се зареждат в рамките на втората марка. Рамката е базирана на unsemantic.com, който е наследник на 960 Grid System.
Когато разглеждат сайта на десктоп и по-големи екрани, потребителите могат да виждат и взаимодействат с всяко от вината поотделно. Те могат да се възползват от по-големия размер на екрана, за да покажат всички характеристики и детайли на виното едно до друго. За разлика от това, на мобилния сайт подробностите и описанието се плъзгат и могат да бъдат плъзгани отново гладко.
08. tota11y
Осъществяването на достъпни уебсайтове е изключително важно. Въпреки това, използваните техники и тестове изглеждат сякаш изискват задълбочена специализация, която може да накара уеб разработчиците и дизайнерите да се чувстват като изоставени.
Въведете tota11y: прост инструмент, който може да бъде включен като JavaScript файл на страница или, още по-просто, да се използва като отметка на всеки сайт. Той сигнализира за елементи на страницата, които са в противоречие с указанията за достъпност - да речем, нисък визуален контраст или липсващи текстови алтернативи за изображения.
Своенравните елементи са маркирани визуално, което улеснява щракването на екрана и показване на членовете на екипа или клиентите точно какви са проблемите, докато разширените обяснения обучават потребителите за методи за бързо отстраняване на грешките.
Академия Хан Уебсайтът на tota11y не е откровено бляскав, но тогава важната работа не винаги е лъскава. Простотата на текста - както по външен вид, така и по съдържание - опровергава сложността на проблема, който самият инструмент има за цел да облекчи.
09. Познайте лупус
Фондацията на Лупус в Америка (LFA) е национална организация, работеща за разгадаването на загадката на лупуса. процъфтява си партнира с LFA по пробоно проект за информираност на обществеността, за да помогне на широката общественост да разбере болестта.
„LFA искаше да създаде забавна, но информативна игра, която да помогне за обучението на обществеността по ангажиращ начин, за да преодолее този проблем“, обяснява Лора Суелц, UX дизайнер и ръководител на проекта. „Нашият процес на проектиране се фокусира върху постигането на тази цел, като същевременно създаваме нещо, което хората с лупус всъщност ще се чувстват развълнувани от споделянето.“
Решението на Viget беше вдъхновена от казината игра на карти, създадена с помощта на React, в която всяка карта подчертава факт за лупус. Персонализираните илюстрации от дизайнера Блеър Кълбрет поддържат играта лека, докато се занимава със сериозната тема. Вдъхновените от казиното звукови ефекти се преплитат през играта.
Анимациите са гладки и бързи, добавяйки още един слой наслада към играта. Мобилното изживяване е също толкова интерактивно, колкото десктопа, и адаптивните преходи са напълно обмислени. Крайният резултат е игриво преживяване, което кара ученето да се чувства без усилие.
10. Лодката
Разказването на истории с дълги форми непрекъснато набира популярност в новинарските и медийните сайтове, но излъчва мрежа SBS The Boat, онлайн графичен роман, базиран на разказ на Нам Ле, се чувства уникален както със своя стил, така и с изпълнението си. Илюстрациите с мастило на суми, експертно изпълнени анимации и смразяващ звуков пейзаж улавят историята на пътуването на млад виетнамски бежанец.
За да оживи историята, илюстраторът Мати Хюйн прекара шест месеца с оригиналната проза на Нам Ле, скицирайки миниатюри и итеративно създавайки героите.
„Мисля, че балансът, който виждате, идва от този продължителен период на развитие“, обяснява продуцентът Кайли Болтин. „Този дълбок, обърнат навътре период позволи на членовете на основния екип да разберат историята отвътре. Знаехме, че историята бие и знаехме кои моменти трябва да бъдат подчертани. Водещият принцип беше да допълва основното разказване на истории, вместо да го надвива или да добавя елемент само заради него.
Графичните панели се чувстват като скици на дневник - спешни, несъвършени и дълбоко емоционални. Този сайт доказва колко мощно и увлекателно онлайн разказване на истории може да бъде в правилните ръце.
единадесет. Run4Tiger
Базиран в Москва Гладни момчета разработи този сайт за спиране на шоуто за Световния фонд за дивата природа Русия, за да повиши обществената осведоменост за кампанията си „Спаси тигъра“. Защо да се състезавате с приятелите си, когато можете да се състезавате с GPS проследен амурски тигър?
Сайтът ви позволява да синхронизирате вашето работещо приложение по избор (в момента поддържа девет различни приложения!) И настройва вас и други бегачи срещу голямата котка, която средно достига 20 км на ден. Ако тигърът ви победи, вие дарявате $ 5 на WWF.
Това е страхотна концепция и има страхотен дизайн, който да се съчетае с нея. Острата черно-жълта цветова палитра - нехарактерно смело за благотворително приложение - предава спешността на инициативата Save The Tiger.
Създателят на Run4Tiger Ксения Апресян казва, че екипът определено е имал предвид движението при проектирането: „Искахме да направим уебсайта възможно най-динамичен. Ето защо решихме да използваме най-свежите технологии и да покажем основното си послание, направено от динамични частици, на главната страница. '
Следваща страница: Още 10 най-добри примера на JavaScript, които да ви вдъхновят ...
- 1
- две
Текуща страница: Страница 1
Следваща страница Страница 2
