Сайты с html5: Лучшие интерактивные сайты на HTML5

20 интересных сайтов на HTML5

Подборка великолепных сайтов, которые реализованы при помощи html5. Посетив их, Вы сможете убедиться,  что  некоторые технологии этого стандарта  помогут сделать проект более интересным.С каждым днём  HTML5 становится всё популярнее, ведь при помощи этого языка разметки можно значительно улучшить  интерактивность  сайта. В настоящее время html5 поддерживается многими браузерами,  для тех, которые не поддерживают существует плагин html5shiv . Полный переход на этот стандарт запланирован на 2014 год, хотя эта дата не точная. Многие мировые лидеры веб-индустрии уже используют этот язык разметки.

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

1.   На сайте  The Wilderness Downtown.  можно посмотреть интерактивный фильм. Введите адрес дома, в котором Вы росли,  и Вы сможете совершить виртуальное   путешествие  на родину. Проект реализован при помощи сервиса Google Earth и HTML5.

2. Universeries — информационный сайт о теле-продюсерах и их шоу.

3. Agent008Ball  использует методы canvas  языка HTML5. На этом сайте можно играть в бильярд онлайн. Он был создан при поддержке «Microsoft» для демонстрации новых возможностей IE9.

4. Веб-сайт Shell  был созданный в «Legwork Studios» для презентации нового альбома Гэмита «Parts».  Здесь Вы увидите видео-загадку, решив которую можно получить  доступ к бесплатной загрузке  музыки в формате MP3.

5. Сервис Vua.la поможет Вам найти новых друзей. Просто напишите сообщение и укажите желаемый возраст собеседника.

6. Railup.com— очень интересный проект, который реализован при помощи HTML5 Canvas.

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

8. Одностраничный сайт веб-студии  Vision18.  Совершите экскурсию по офису на кресле.

9. При помощи  сервиса Bikingboss.com можно отправить своего босса очень далеко.

10. Сайт веб-дизайнера Вильяма Кзете, который  реализован при помощи html5 . В разделе  песочница (sendbox)  Вы  также можете увидеть несколько интересных работ, выполненных при помощи CSS.

11. Art Of Stars использует Ваш IP-адрес, чтобы показать картинку звёздного неба над Вами.

12. Сайт музыкальной  группы  ROME

13. Lost World’s Fairs— красочный сайт, который описывает новые возможности типографики для веб.

14. Toyota Prius празднует своё десятилетие. Этот сайт хорошо иллюстрирует то, как HTML5 может помочь создать проект более интерактивным.

15. Rumpetroll — сервис для общения. Здесь Вы выглядите как головастик и плаваете в футуристическом водоеме. Этот сайт даёт нам небольшое представление о том, как будут выглядеть социальные сети будущего.

16.  Ghost Shooter- игра-стрелялка, созданная при помощи технологий HTML5.

17. Портфолио Филиппа Эндрюса, фрилансера из Австралии, который делает сайты при помощи флэш и HTML5.

18. Сайт  web-разработчика Филидора Визе , проект создан при помощи HTML5,CSS3 и jQuery.

19. Промо-сайт   нового альбома Бьорк. Он сложный и непредсказуемый, как сама вселенная, совершите небольшое космическое путешествие при помощи этого проекта.

20. Ella Design — сайт  дизайнера из Гон-Конга, который в данный момент проживает в США.   Портфолио очень  хорошо иллюстрировано и разработано при помощи HTML5 и CSS3.

Автор подборки – Дежурка

• Опубликовано в Веб-дизайн, февраля 9, 2012
• Метки: html, html5, вдохновение, веб дизайн, сайт

Tweet

�



[an error occurred while processing the directive]

15 сайтов, которые творят удивительные вещи с помощью HTML5

Предстоящее обновление HTML5 для языка гипертекстовой разметки, которому 20 лет, обещает вывести «веб» на совершенно новый уровень, позволяя браузеру делать больше как с визуальной точки зрения, так и с точки зрения данных . Несмотря на то, что HTML5 все еще далек от полного развертывания, это не помешало многим разработчикам довести его до предела.

Ознакомьтесь с этими удивительными веб-сайтами, которые действительно дают вам хорошее представление о возможностях HTML5 как языка программирования, делая в вашем веб-браузере то, что когда-то было возможно только во внешней программе или плагине. Я тестировал их в Chrome, и все они должны работать в браузерах, совместимых с HTML5, таких как Chrome, Firefox 4, Safari или IE9.. Это демонстрационные версии, и HTML5 все еще находится в стадии разработки, поэтому, если у вас возникнут проблемы с их просмотром, вы можете попробовать использовать их в другом браузере. Наслаждаться!

Это отличная демонстрация, сделанная Arcade Fire и Google, в которой представлены различные трюки HTML5 Canvas. Не хочу портить вам сюрприз — введите адрес своего детства и наслаждайтесь видео и техническим волшебством.

WebVenture — это реализация игровой платформы MacVenture на HTML5 и Javascript. Теперь вы можете играть в Deja Vu 1 & 2, Shadowgate и Uninvited прямо в браузере! Другие игровые реализации, такие как Wolfenstein 3D, разрабатываются, чтобы перенести игры в ваш браузер.

Этот сайт от Google демонстрирует «книжный» подход к описанию того, как работают веб-браузеры и сколько работают лежащие в их основе технологии. Впечатляющий с технической точки зрения, он также является хорошим учебником для читателей, которые хотели бы узнать больше о том, как работает Интернет.

Совместное рисование

В этой демонстрации используется функция веб-сокетов HTML5, позволяющая зрителям одновременно совместно рисовать на холсте.

SketchPad — программа для рисования в Интернете. Он поддерживает элементарные инструменты рисования и выполняется только на HTML5 и JavaScript.

Galactic Plunder — это двухмерный космический шутер, реализованный на HTML5. Не так много функций, как обычный шутер с боковой прокруткой, он полностью сделан на HTML5, что само по себе впечатляет.

HTML5 позволяет многое сделать с видео в Интернете. Помимо того, что вы можете воспроизводить его без веб-браузера, без плагина, он также позволяет вам манипулировать этим видео. В этой демонстрации показано, как можно «взорвать» пиксели видео во время воспроизведения.

Многооконный шар

Это демонстрация и эффект, который также можно увидеть в видеоролике Arcade Fire. HTML5 позволяет открывать несколько окон и перемещать объекты между ними.

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

Если вы были геймером в начале 90-х, вы с любовью вспомните этот эффект. Поскольку вычислительная мощность была ограничена, графические дизайнеры использовали «уловки» для имитации видео в статичном изображении. Этот эффект холста покажет вам, как это было сделано, а также включает множество красивых примеров.

HTML5 Experiments от Hakim.

На этом сайте представлено множество демо-версий игр и других изящных гаджетов, демонстрирующих возможности HTML5. Хорошо для вдохновения и, возможно, немного отвлечения времени.

Harmony — это маленькая аккуратная программа для рисования, которая позволяет вам использовать крутые кисти для рисования картинок. Вы можете создавать такие вещи, как «мех» и «паутина», которые просто здорово видеть в творчестве.

Этот аккуратный мэшап от @9elements объединяет музыку и вращающиеся точки с сообщениями в Твиттере о HTML5. Трудно описать на практике, нужно увидеть, чтобы понять!

Radiohead/HTML5 Mashup

Еще один аккуратный мэшап, в котором Idioteque Radiohead сочетается с рисунком Тома Йорка, который рисуется по ходу песни. Еще один эффект «видимо, чтобы поверить».

Хотите больше?

Эти два веб-сайта созданы для демонстрации различных демонстраций HTML5 и эффектов HTML5 Canvas. От приземленных до «крутых», если вы жаждете большего, это места, куда можно пойти.

Сейчас в Интернете есть много демо-версий HTML5, и он уже на пути к тому, чтобы стать новым стандартом Интернета. У вас есть потрясающие демо, которыми вы хотели бы поделиться? Пожалуйста, напишите в комментариях ниже!

10 лучших веб-сайтов HTML5 2023 года

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

1 | Центр дикой природы
The Wilderness Downtown — это интерактивное музыкальное видео на песню Arcade Fire «We Use to Wait». Посетителей просят ввести адрес дома, в котором они выросли, а затем сайт использует Google Earth и HTML5 для создания персонализированного музыкального видео, которое отправляет пользователя в путешествие домой.

2 | Сердце Арктики
Heart of The Arctic отправляет пользователей в арктическую экспедицию/охоту за мусором в четырех разных средах, предназначенных для того, чтобы показать пользователям шаги, которые потребуются для восстановления климатического баланса в арктическом регионе.

3 | Три мечты о черном
3 Dreams of Black использует HTML5 для продвижения Danger Mouse и альбома Rome Даниэля Луппи. Сайт создает трехмерный интерактивный мир с помощью WebGL, где все объекты в видео реагируют как на музыку, так и на действия пользователя. Сайт заставит вас почувствовать, что вы ПОПРОБОВАЛИ песню, а не просто слушали ее.

4 | Наслаждайтесь конфиденциальностью
Веб-сайт был создан, чтобы предупредить потребителей об опасностях, связанных с неиспользованием защиты паролем на своих мобильных устройствах. Это делается с помощью Html5 для создания второго экрана, который действительно напугает тех, кто до сих пор избегал защиты паролем своих мобильных устройств. Так что берегите себя.

5 | Музыкальный тур Google Play
Здесь Google использует Html5 для демонстрации многих функций своего сервиса потоковой передачи музыки Google Play. Это один из ярких примеров того, как интеграция видео, звука и интерактивной графики может быть объединена с Html5 для создания захватывающей и забавной рекламы продукта, которая может привлечь внимание потребителей.

6 | Жнец душ
Цифровой комикс, активируемый прокруткой, разработанный Saizen Media, использует HTML5, чтобы вдохнуть новую жизнь в представление графических историй. Добавленное движение и темп оживляют статические изображения и историю, создавая впечатление моста между старыми комиксами и видео.

7 | Выразительная сеть
Компания Adobe создала веб-сайт Expressive Web, чтобы подчеркнуть функциональность и творческий потенциал, предлагаемые за счет использования HTML5 и CSS3. Благодаря различным примерам и фрагментам кода это действительно лучшее «продвинутое» руководство пользователя HTML5, которое мы видели. Этот сайт должен быть добавлен в закладки всеми разработчиками HTML5.

8 | Искусство звезд
Art of the Stars использует ваш IP-адрес, чтобы нарисовать изображение звездного созвездия прямо над вами.