48 жорстоких демонстрацій HTML5 / CSS3

Я приймаю цей пост, щоб відповісти на запитання, яке ви нещодавно задавали у коментарях до статті:

Коли сприятливий час розпочати повноцінне проектування з HTML5?

Ну, чесно кажучи, це залежить від цілі, на яку ви націлюєтесь. Якщо ви не плануєте, щоб ваші відвідувачі користувались Internet Explorer (наприклад: сторінка програмного забезпечення для Mac), то почніть одразу з HTML5, але якщо вам потрібні люди з IE для перегляду вашого веб-сайту, вам краще почекати ...

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

Джерело | Гонкіат

audioburst Анімація

Комфортна і фантастична анімація, створена за допомогою полотна та звукового тегу HTML5.

Басейновий басейн

Продемонстрована в останній події вводу-виводу Google, ця демонстрація показує, наскільки динамічним може бути HTML5.

Цукрова салата

Породжена HTML5 істота, яка вам сподобається.

Бомомо

За допомогою Bomomo ви можете спостерігати різні атомні рухи, змодельовані за допомогою HTML5.

Браузерний бал

Здивуйтеся цій кульці HTML5 у "перехресному браузері".

Бульбашки

Веселіться, створюючи нескінченні плаваючі бульбашки різного кольору.

Полотно мультфільм анімації

Простий і смішний мультфільм HTML5, який допоможе вам зрозуміти, що вміє елемент полотна HTML5.

Крутий годинник

Приємний, настроюваний аналоговий годинник, побудований HTML5 та JavaScript.

Слайд-шоу Flickr PS3

Переглядайте фотографії Flickr за допомогою слайд-шоу у стилі PS3 у веб-браузері.

Інтерактивний Polaroid

Інтерактивна демонстрація, яка працює майже так само, як інтерфейс Multi Touch.

JS феєрверк

Насолоджуйтесь феєрверком із вашою бажаною силою тяжіння та швидкістю завдяки HTML5 та Javascript.

Калейдоскоп

Дуже гарний і футуристичний калейдоскоп HTML5.

Рідкі частинки

Анімація чутливих частинок, яка реагує на основі руху вашого миші.

Зачаровуючий засіб

Ще одна чутлива та видатна демонстрація HTML5, яка показує, як елементи поруч реагують на рух миші.

Туманність Хмара

Заблукайте за допомогою цієї дивовижної туманності HTML5.

Параллакс

Переглянути всі 2D-фігури в паралельній перспективі.

Анімація частинок

Елегантна анімація частинок HTML5, яка може перетворитися на улюблене повідомлення.

Поширювати

Заблукайте з цією нескінченною анімацією.

Starfield

Дуже класна анімація зоряного поля HTML5, яка змінює напрямок і швидкість на основі руху миші.

Відео знищення

Одним клацанням миші відтворюється відтворюване відео.

Форма хвилі

Зверніть увагу на те, як рухається полотняна хвиля HTML5, змінюючи її амплітуду, довжину хвилі, ширину тощо.

Ефект 3D

Вразила анімація на полотні? Це більше можливостей елемента полотна HTML5, і це називається 3D-ефект. Розробник може покластися на елемент полотна, DOM та JavaScript для створення 3D-ефекту, який згодом можна переробити в 3D-анімацію або гру.

Canvas3D та Flickr

Майте абсолютно новий досвід 3D із фотопотоком Flickr.

Імітація тканини

Реалістичне моделювання тканини на основі HTML5.

Еволюціонуючий монстр

Спостерігайте за монстром, який перетворюється на складну істоту, одним із його творців є HTML5.

Подарункова коробка Google

Гігантська пошукова система Google представлена ​​у тривимірному перегляді.

J.S. Touch

Високоякісна та реалістична вітрина "3D на 2D полотні".

Презентація даних

Хоча елемент полотна HTML5 можна використовувати для створення анімації та 3D-ефекту, він також може бути реалізований для подання математичних даних.

Гнуплот

Gnuplot, додаток для побудови даних у версії HTML5.

RGraph

RGraph забезпечує широкий спектр подання даних, таких як гістограма, індикатор прогресу та традиційна радіолокаційна діаграма.

Веб-додаток

Зрештою, використовуючи всі можливості, поєднані HTML5 та іншими мовами, можна створити інтерактивний додаток або гру, близьку до програми Flash.

CanvasPaint

Свідок, як брат Microsoft Paint заходить у ваш веб-браузер, а його батьком є ​​HTML5.

CanvasMol

Науковий додаток, який створений, щоб допомогти вам зрозуміти структуру певного елемента землі.

Мультфільм будівельник

Намалюйте цікаве зображення мультфільму за допомогою цього мінімального та інтерактивного конструктора мультфільмів.

Перетягніть що завгодно сюди

Перетягніть все, що можна перетягнути в демонстраційному режимі, щоб показати деталі.

Гартичний ескіз

Оригінальна програма HTML5, яка дозволяє зробити деякі основні креслення, які можна зберегти у різному форматі зображення, наприклад, у форматі jpeg або png.

PhysicalSketch

Намалюйте все, що вам подобається, і подивіться, як вони реагують із імітованою силою тяжіння.

Sketchpad

Потужний додаток для малювання HTML5, який дозволяє точно малювати та редагувати зображення.

Маленький розмова

Веб-додаток, який підтверджує географічне положення повідомлень, пов’язаних з погодою, отриманих від Twitter, таким чином формуючи їх у „соціальну погоду” на основі полотна, досить тривіальну (як зазначив автор), але цікаву.

Game

3Нудливо

Вам ніколи не буде нудно, якщо ви зможете продовжувати ухилятися від сотень маркерів HTML5 протягом наступної секунди.

Тематична

Відбийте м'яч, щоб розбити всі цеглини.

Полотно

Не зовсім гра, але вона демонструє, як HTML5 можна використовувати для розробки браузерної гри від першої особи.

Спіймати

Скільки кульок ви можете ухилитися, щоб отримати свій виграшний квадрат HTML5?

Ланцюгова реакція

Ланцюг вибуху для досягнення мети, не потрапляйте в залежність.

Вирізання

Грайте в тетріс у 3D, зверху вниз.

etchaphysics

Намалюйте предмет, щоб перемістити кулю до зірки, не забувайте про гравітацію.

Пазли

Клацніть, обертайте і скидайте шматочки головоломки, щоб вирішити цю головоломку на основі HTML5.

Слайд-головоломка

Слайд до перемоги, ще одна гра HTML5, створена для того, щоб вичавити ваш розум.

Та сама гра

Видаліть певну групу, щоб отримати іншу групу в парі того самого кольору, і зрештою ви отримаєте перемогу.

Tetris

Одна з найбільш класичних ігор, оживлена ​​HTML5.

Торус

Ще одна гра в тетріс у псевдо-3D версії.