15 (Докладніше) Надихаючі експерименти HTML5

Якщо ви не жили під скелею, ви почули про HTML5. Це просто скрізь, завдяки просуванню Apple Генеральний директор екс-CEO Стів Джобс і деякі розробники, які вважають, що HTML5 може взяти на себе Flash.

Добре, насправді ми не бачимо цієї ситуації ще, але HTML5 дійсно магічний у зв'язку з його відео можливості, полотно ілюстрації та анімації, які працюють дуже добре і гладко. Справа в тому, що це настільки багатообіцяюче, що проекти з'являються по всіх місцях, які були зроблені як спосіб перевірки меж HTML5.

Повірте свої сили чи ні, ми будемо демонструвати вам 15 просвітницьких експериментів, які найкраще використовують HTML5, і здогадайтеся, що, ви можете випробувати гравітацію, музичну анімацію і рендерінг істот, які просто працюють як істоти! Приємно провести час разом з ними й ойп, вони найкраще підходять для останньої версії Mozilla Firefox і Google Chrome.

У випадку, якщо ви не задоволені цими забавами HTML5, у нас є більше для вас!

• HTML5: 48 Потенційні флеш-убиваючі демонстрації
• Потенційні веб-програми HTML5: 19

Цикл полотна

Спільні зусилля між художником Марком Феррарі та кодером Джозефом Хакабі, це чудова колекція рухомих сцен природи, таких як ліси взимку, морські пейзажі і бурхливі гори. Вони розслабляються, щоб подивитися і дійсно приголомшливі, зі звуками, прикріпленими до картин. Якщо ви хочете, щоб трохи відпочити від роботи, ви можете пройти ці фотографії і відчути, що ваша напруга просто розплавиться.

Google Gravity

Інший дивовижний містер Doob, цей менш інтерактивний ніж перший але досі прохолодний. Вона надає основну копію головної сторінки пошуку Google. Але коли ви вказуєте курсор, вся сторінка починає «падати», поки всі вони не впадуть внизу. Логотип Google працює як активне посилання, яке оновлює сторінку. Хороша гра для тих великих компаній, які ненавидять Google, може бути.

Дерево полотна

Зроблено Кеннетом Йоргенсоном, це може бути єдине місце, де ви можете побачити фразу 'Оновити більш смачні дерева :)'. Це саме те, що він говорить: ви натискаєте на сайті, і це приведе вас до білого фону. Чорний чорнильний малюнок дерева почне «рости», розраховуючи на те, скільки гілок триває. Ви можете оновити, щоб побачити стільки разів, скільки бажаєте.

Магнітні

Це ще одна цікава і захоплююча для вас насолода. Ви в основному починаєте з пари "магнітів", які можна перетягувати по екрану. Частинки світлої орбіти навколо них, і якщо ви зміщуєте позиції, ви можете змінити їхні форми. Якщо ви хочете більше магнітів і частинок, ви просто двічі клацніть і перетягніть їх туди, де ви їх хочете. Так, це все про магніти і фізику!

Графік прибутків знаменитостей

Хочете побачити візуальне уявлення про те, скільки телевізійних знаменитостей заробляє на епізод? Це прохолодний маленький графік, який показує стеки кольорових смуг, що представляє, скільки конкретної знаменитості робить на стрічці телевізійного шоу (або зроблено, у випадках, як Чарлі Шин). Це було зроблено як один з багатьох проектів і експериментів Даніеля Раппа.

Полотно стрічки

Пол Труонг зробив це цікаве додаток, що дозволяє малювати за допомогою постійно рухається, різнобарвної стрічки по екрану. Це робить форми і конструкції, і ефект досить гарний. Все, що вам потрібно зробити, це перетягнути його по екрану, говорити про простоту.

WebGL Вода

Тут приходить прохолодна демонстрація з використанням революційної WebGL (веб-графічної бібліотеки), яку найкраще обслуговує Google Chrome. За допомогою демо ви можете намалювати на воді, щоб зробити брижі, або перетягнути сферу, щоб перемістити її навколо і натиснути деякі клавіші клавіатури, щоб встановити напрямок світла і переключити гравітацію, все для того, щоб засвідчити, як переміщений об'єкт взаємодіє з навколишнім середовищем реалістично.

Chrysaora

Ще одна приголомшлива демонстрація, що застосовує магію WebGL, яку ви можете побачити в групі надзвичайно красивих і найголовніше, живих медуз, що рухаються у воді, опромінених променями сонцеподібного світла. Слідкуйте про період, коли HTML5 і WebGL допомагають веб-сайтам краще переглядати за допомогою Google Chrome.

Voxel Rain

Дощ Voxel означає, що різнокольорові 3D коробки спускаються, щоб утворити обертовий великий блок. Це виглядає як демонстрація можливостей комп'ютера в 1990-х роках, і тепер справа доходить до веб-браузера, використовуючи силу HTML5, найяскравіша ера Інтернету не набагато.

Текстові ефекти HTML5

Часто ми розробляємо веб-дизайнер, скільки можливостей HTML5 дійсно допомагає нам прориватися в веб-типографіці, і ця демонстрація дає вам відповідь більше, ніж будь-коли! Ви можете спостерігати стереоскопічний ефект, неоновий ефект або навіть неоновий ефект, майбутнє веб-типографіки в руках HTML5.

Спінінг логотипу HTML5

Я просто не можу тримати славу HTML5, він обертається, він обертається ... це круто.

Ескізи в 3D

Набридли 2D-сервіси на базі HTML5? Перевір це. Просто намалюйте лінію та натисніть клавішу Пробіл, а потім перетягніть вліво або вправо, і ви побачите, що ваш малюнок обертається в 3D-перспективі. 3D-креслення не складніше з HTML5.

mta.me Диригент

Mta.me Conductor надихає вас на нерест точки, які будуть рухатися постійно, щоб сформувати лінії, і коли лінії “стикаються” один одному вони будуть викликати деяку взаємодію. Все, щоб довести, що HTML5 - це не лише кодекс, а й взаємодія, і саме цим користуються веб-користувачі.

Google Gmail

Цікава гра типу шутера, але герой Gmail, звільнивши його від зол! Так само, як класична гра шутера, ви отримали життя, рахунок і всемогутній лазерний промінь. Ймовірно, це одна з потенційних демо-версій, щоб продемонструвати можливості HTML5 як гри. Слідкуйте, Flash.

W Пілот

Це така захоплююча гра, що вона повинна бути незаконною. Серйозно, як тільки ви увійдете в один зі своїх серверів, ви захочете грати годинами. Ви летите навколо зйомки речей, уникаючи при цьому удару іншими гравцями. Це просто і так весело грати, і той факт, що він дозволяє багатокористувацький досвід є серйозним плюсом, який ставить його вище флеш-ігор, які так популярні прямо зараз.