Домашняя » Веб-дизайн » Веб-сайт HTML5 демонстрирует 48 потенциальных демонстрационных роликов

    Веб-сайт HTML5 демонстрирует 48 потенциальных демонстрационных роликов

    Итак, вы слышали, что все слухи о HTML5 захватят Adobe Flash. Хотя большинство веб-сообществ утверждают, что это возможно или нет, вы, должно быть, бродите, что делает HTML5 настолько мощным, что даже гигантская компания Apple хочет использовать его для замены Flash.

    Вот почему этот пост существует, мы не будем говорить о том, что может сделать HTML5, но покажем живые демонстрации волшебных вещей, которых HTML5 может достичь с помощью другого языка, такого как JavaScript, так что будьте готовы вдохновляться.

    Примечание. Поскольку HTML5 не полностью поддерживается определенным веб-браузером, таким как Internet Explorer, настоятельно рекомендуется использовать браузер Firefox для просмотра всех демонстраций HTML5, представленных ниже..

    Анимация

    Элемент canvas в HTML5 является решающим фактором для замены определенной флэш-анимации в HTML5. Он позволяет создавать динамический рендеринг 2D-фигур и растровых изображений с помощью сценариев с помощью Javascript, который, в свою очередь, представляет собой управляемую анимацию.

    Аудиобурст Анимация

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

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

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

    Блоб Саллад

    HTML5-порожденное существо, которое порадует вас.

    Bomomo

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

    Браузер Бал

    Вы будете поражены этим кросс-браузерным шаром HTML5.

    Пузыри

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

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

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

    Coolclock

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

    Flickr PS3 Slideshow

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

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

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

    JS Fireworks

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

    Калейдоскоп

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

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

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

    Mesmerizer

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

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

    Потеряться с этой удивительной туманностью HTML5.

    параллакс

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

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

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

    распространение

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

    Starfield

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

    Уничтожение видео

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

    форма волны

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

    3D-эффект

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

    Canvas3D и Flickr

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

    Имитация ткани

    Реалистичное моделирование одежды на основе HTML5.

    Эволюционирующий монстр

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

    Google Giftbox

    Гигантская поисковая система Google представлена ​​в 3D, играбельном виде.

    JS Touch

    Высококачественная и реалистичная витрина "3D on 2D Canvas".

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

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

    Gnuplot

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

    RGraph

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

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

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

    CanvasPaint

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

    CanvasMol

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

    Cartoon Builder

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

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

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

    Gartic Sketch

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

    PhysicSketch

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

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

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

    Болтовня

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

    Игра

    3Bored

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

    Разразиться

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

    Canvascape

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

    Лови

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

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

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

    Cubeout

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

    etchaPhysics

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

    Пазл

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

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

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

    Та же игра

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

    Tetris

    Одна из самых классических игр, ожившая HTML5.

    торус

    Еще одна игра тетрис в псевдо-3D версии.

    Заключение

    Каково ограничение HTML5? На данный момент мы не можем решить, но с помощью впечатляющего видео ниже мы можем узнать, как далеко продвинулся HTML5:

    Да, это Quake II в веб-браузере, так что теперь совершенно ясно, что с HTML5 появилось бы более революционное веб-приложение для обслуживания миллиардов интернет-пользователей. Это быстро, это развивается, и это изменяет всемирную паутину. Вопрос в том, как бы вы использовали этот изменяющий игру HTML5??

    Мы хотели бы услышать вашу идею!