48 брутални демонстрации на HTML5 / CSS3

Поемам тази публикация, за да отговоря на въпрос, който зададохте наскоро в коментарите на статия:

Кога е подходящ момент да започнете да проектирате изцяло с HTML5?

Е, честно казано, това зависи от целта, към която се насочвате. Ако не планирате посетителите ви да използват Internet Explorer (напр. Страница със софтуер за Mac), започнете веднага с HTML5, но ако имате нужда от хора с IE, за да видят уебсайта ви, по-добре изчакайте ...

За входа, добре след скока 48 демонстрации на HTML5, които са невероятни и заслужават да бъдат видяни. Страхотно е малко.

Източник | Хонкокиат

audioburst Анимация

Удобна и фантастична анимация, създадена с платно и аудио таг на HTML5.

Топка басейн

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

Blob салата

Създадено от HTML5 създание, което би ви харесало.

Бомомо

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

Браузър топка

Изненадайте се с тази топка за HTML5 в различни браузъри.

Bubbles

Забавлявайте се, като създавате безкрайни плаващи мехурчета с различен цвят.

Анимация на карикатура на платно

Прост и забавен анимационен филм в HTML5, който ви помага да разберете какво може да направи елемента на платното на HTML5.

Готин часовник

Хубав, персонализируем аналогов часовник, създаден от HTML5 и JavaScript.

Flickr PS3 слайдшоу

Преглеждайте снимките на вашия Flickr със слайдшоу в стил PS3 в уеб браузъра.

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

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

JS фойерверки

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

Калейдоскоп

Много красив и футуристичен калейдоскоп в HTML5.

Течни частици

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

Хипнотизатор

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

Мъглявина Облак

Загуби се с тази прекрасна мъглявина HTML5.

Parallax

Вижте всички 2D фигури в паралелна перспектива.

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

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

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

Загуби се с тази безкрайна разпространена анимация.

звездното поле

Много готина HTML5 анимация на звездно поле, която би променила посоката и скоростта въз основа на движението на мишката.

Видео унищожаване

С едно щракване за бум на възпроизвеждащо се видео.

Waveform

Забележете как се движи платнената вълна на HTML5, като променя нейната амплитуда, дължина на вълната, ширина и т.н.

3D ефект

Впечатлен от анимацията на платно? Това е повече, което HTML5 елементът на платното може да направи и се нарича 3D ефект. Разработчикът може да разчита на елемент на платно, DOM и JavaScript, за да създаде 3D ефект, който по-късно може да се превърне в 3D анимация или игра.

Canvas3D и Flickr

Имайте изцяло ново 3D изживяване с фотопотока на Flickr.

Симулация на плат

Реалистична, базирана на HTML5 симулация на плат.

Развиващо се чудовище

Наблюдавайте чудовище, което се развива в сложно същество, един от създателите му е HTML5.

Google Подаръчна кутия

Гигантската търсачка Google е представена в триизмерен изглед.

JSTouch

Висококачествена и реалистична витрина „3D на 2D платно“.

Представяне на данни

Докато платформеният елемент на HTML5 може да се използва за създаване на анимация и 3D ефект, той може да се приложи и за представяне на математически данни.

Гнуплот

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

RGraph

RGraph предоставя широк спектър от представяне на данни като стълбовидна диаграма, лента за напредъка и традиционна радарна диаграма.

Уеб приложението

В крайна сметка, използвайки всички възможности, комбинирани от HTML5 и други езици, може да се създаде интерактивно приложение или игра, близка до приложението Flash.

CanvasPaint

Станете свидетел как братът на Microsoft Paint влиза във вашия уеб браузър, а баща му е HTML5.

CanvasMol

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

Карикатурен строител

Начертайте интересно анимационно изображение с този минимален и интерактивен конструктор на карикатури.

Плъзнете всичко тук

Плъзнете всичко, което можете да плъзнете в демонстрацията, за да покажете подробности.

Гартическа скица

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

PhysicalSketch

Нарисувайте каквото ви харесва и вижте как те реагират със симулирана гравитация.

Sketchpad

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

Общи приказки

Уеб приложение, което потвърждава географското положение на съобщението, свързано с времето, придобито от Twitter, като по този начин ги оформя в базирана на платното карта на „социалното време“, доста тривиална (както заяви авторът), но интересна.

игра

3Отегчен

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

Breakout

Отскочете топката, за да счупите всички тухли.

Платно

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

Хвани го

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

Верижна реакция

Свържете експлозията, за да постигнете целта, не се пристрастявайте.

cubeout

Играйте Tetris в 3D, изглед отгоре надолу.

etchaPhysics

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

Пъзел

Щракнете, завъртете и пуснете части от пъзела, за да решите този базиран на HTML5 пъзел.

Плъзгам пъзел

Плъзнете към победа, друга HTML5 игра, която е създадена, за да изцеди ума ви.

Същата игра

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

Tetris

Една от най-класическите игри, съживени от HTML5.

цветно легло

Още една игра Tetris в псевдо-3D версия.