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

Я использую этот пост, чтобы разрешить вопрос, который вы недавно задавали в комментариях к статье:

Когда подходящее время для того, чтобы полностью заняться проектированием с использованием HTML5?

Честно говоря, это зависит от цели, на которую вы нацеливаетесь. Если вы не планируете, чтобы ваши посетители использовали Internet Explorer (например, страницу программного обеспечения Mac), сразу начните с HTML5, но если вам нужно, чтобы люди с IE видели ваш сайт, вам лучше подождать ...

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

Источник | Гонконг

audioburst Анимация

Удобная и фантастическая анимация, созданная с помощью холста HTML5 и тега аудио.

Бассейн с шариками

Эта демонстрация, представленная на последнем мероприятии Google I / O, показывает, насколько динамичным может быть HTML5.

Капля Саллад

Созданное HTML5 существо, которое доставит вам удовольствие.

бомомо

С Bomomo вы можете наблюдать различные атомные движения, смоделированные с помощью HTML5.

Браузерный шар

Получите удовольствие от этого "кроссбраузерного" шара HTML5.

Пузыри

Развлекайтесь, создавая бесконечные плавающие пузыри разного цвета.

Холст Мультфильм Анимация

Простой и забавный мультфильм HTML5, который поможет вам понять, на что способен элемент холста HTML5.

крутые часы

Хорошие настраиваемые аналоговые часы, созданные на HTML5 и JavaScript.

Слайд-шоу Flickr PS3

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

Интерактивный поляроид

Интерактивная демонстрация, которая работает очень похоже на мультитач-интерфейс.

JS фейерверк

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

Калейдоскоп

Очень красивый и футуристический калейдоскоп HTML5.

Жидкие частицы

Чувствительная анимация частиц, которая реагирует на движение мыши.

Гипнотизер

Еще одна важная и выдающаяся демонстрация HTML5, которая показывает, как соседние элементы реагируют на движение мыши.

Облако Туманности

Заблудитесь в этой чудесной туманности HTML5.

Параллакс

Просматривайте все 2D-формы в параллельной перспективе.

Анимация частиц

Элегантная анимация частиц HTML5, которая может превратиться в ваше предпочтительное сообщение.

Распространять

Заблудитесь с этой бесконечной анимацией распространения.

Starfield

Очень крутая HTML5-анимация звездного поля, которая меняет направление и скорость в зависимости от движения мыши.

Видео уничтожение

Один щелчок, чтобы ускорить воспроизведение видео.

Waveform

Обратите внимание, как движется волна холста HTML5, изменяя ее амплитуду, длину, ширину и т. Д.

Эффект 3D

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

Canvas3D и Flickr

Получите совершенно новый опыт 3D с фотопотоком Flickr.

Ткань Моделирование

Реалистичная симуляция ткани на основе HTML5.

Развивающийся монстр

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

Подарочная коробка Google

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

Дж. С. Тач

Качественная и реалистичная витрина «3D на 2D холсте».

Представление данных

Хотя элемент холста HTML5 можно использовать для создания анимации и 3D-эффекта, его также можно реализовать для представления математических данных.

Гнуплот

Gnuplot, приложение для построения графиков данных в версии HTML5.

РГграф

RGraph предоставляет широкий спектр представлений данных, таких как гистограмма, индикатор выполнения и традиционная радарная диаграмма.

Веб приложение

В конечном итоге, используя все возможности HTML5 и других языков, можно создать интерактивное приложение или игру, близкую к Flash-приложению.

ХолстКраска

Посмотрите, как брат Microsoft Paint входит в ваш веб-браузер, а его отец - HTML5.

ХолстМол

Научное приложение, которое поможет вам понять структуру определенного элемента земли.

Строитель мультфильмов

Нарисуйте интересную мультяшную картинку с помощью этого минималистичного интерактивного конструктора мультфильмов.

Перетащите что-нибудь сюда

Перетащите все, что вы можете перетащить в демонстрации, чтобы показать подробности.

Гартик эскиз

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

физикаСкетч

Нарисуйте все, что вам нравится, и посмотрите, как они реагируют на симулированную гравитацию.

записная книжка

Мощное приложение для рисования HTML5, которое позволяет точно рисовать и редактировать изображения.

Болтовня

Веб-приложение, которое подтверждает географическое положение сообщения о погоде, полученного из Twitter, тем самым формируя его в виде карты «социальной погоды» на основе холста, довольно тривиальной (как утверждает автор), но интересной.

Игра

3скучно

Вам никогда не будет скучно, если вы сможете уклоняться от сотен пуль HTML5 в следующую секунду.

Прорыв

Отбейте мяч, чтобы разбить все кирпичи.

Холст

Не совсем игра, но она демонстрирует, как HTML5 можно использовать для разработки браузерной игры «Стрельба от первого лица».

Лови

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

Цепная реакция

Закрепите взрыв, чтобы достичь цели, не увлекайтесь.

Кубаут

Играйте в тетрис в 3D, вид сверху вниз.

etchaФизика

Нарисуйте предмет, чтобы переместить мяч к звезде, не забывая о гравитации.

Пазлы

Щелкайте, вращайте и бросайте кусочки головоломки, чтобы решить эту головоломку на основе HTML5.

Slide Puzzle

Slide к победе, еще одна игра HTML5, созданная для того, чтобы выжать из вашего ума.

Та же игра

Удалите определенную группу, чтобы получить другую группу того же цвета, и в конечном итоге вы получите победу.

Tetris

Одна из самых классических игр, возвращенных к жизни с помощью HTML5.

торус

Очередной тетрис в псевдо-3D версии.