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

платно карикатура анимация HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

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

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

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

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

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

audioburst Анимация

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

audioburst animation HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

Топка басейн

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

топка басейн HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

Blob Sallad

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

blob sallad HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

Бомомо

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

bomomo HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

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

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

браузър топка HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

Bubbles

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

мехурчета HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

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

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

платно карикатура анимация HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

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

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

coolclock HTML5 Showcase: 48 потенциални демонстрации за убиване на Flash

Flickr PS3 слайдшоу

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

flickr ps3 слайдшоу HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

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

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

интерактивна полароидна HTML5 витрина: 48 потенциални демонстрации за убиване на Flash

JS фойерверки

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

js фойерверки HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

Калейдоскоп

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

kaleidoscope HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

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

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

течни частици HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

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

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

хипнотизатор HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

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

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

мъглявина облак HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

Parallax

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

паралакс HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

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

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

анимация на частици HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

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

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

разпространение на HTML5 Showcase: 48 потенциални демонстрации за убиване на Flash

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

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

витрина на HTML5 на starfield: 48 демонстрации на потенциални Flash убийства

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

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

видео унищожаване HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

Waveform

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

waveform HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

3D ефект

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

Canvas3D и Flickr

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

canvas3d и flickr HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

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

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

Симулация на плат HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

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

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

развиващо се чудовище HTML5 Showcase: 48 потенциални демонстрации за убиване на Flash

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

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

google giftbox HTML5 Showcase: 48 потенциални демонстрации за убиване на Flash

JS Touch

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

js touch HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

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

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

Гнуплот

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

gnuplot HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

RGraph

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

rgraph HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

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

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

CanvasPaint

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

canvaspaint HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

CanvasMol

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

canvasmol HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

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

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

анимационен конструктор HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

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

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

плъзнете нещо тук Витрина на HTML5: 48 демонстрации на потенциални Flash убийства

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

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

gartic sketch HTML5 Showcase: 48 потенциални демонстрации за убиване на Flash

PhysicSketch

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

physicsketch HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

Sketchpad

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

скицпад HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

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

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

smalltalk HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash

игра

3Отегчен

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

3bored HTML5 Showcase: 48 потенциални демонстрации за убиване на Flash

Breakout

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

пробив на HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

Платно

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

canvascape HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

Хвани го

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

хвани го HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

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

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

верижна реакция HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

Cubeout

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

cubeout HTML5 Showcase: 48 потенциални демонстрации за убиване на Flash

etchaPhysics

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

etchaphysics HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

Пъзел

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

пъзел HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

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

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

слайд пъзел Витрина HTML5: 48 Потенциални демонстрации за убиване на Flash

Същата игра

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

същата игра HTML5 Витрина: 48 потенциални демонстрации за убиване на Flash

Tetris

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

тетрис HTML5 Витрина: 48 Потенциални демонстрации за убиване на Flash

цветно легло

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

torus HTML5 Showcase: 48 Потенциални демонстрации за убиване на Flash


Съдържанието на статията се придържа към нашите принципи на редакторска етика. За да съобщите за грешка, щракнете върху тук.

7 коментара, оставете своя

Оставете вашия коментар

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

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.

  1.   Чупатина каза той

    ТЕТРИСЪТ НЕ ОТИДА, ПОСТАВЯМ ДВЕ ЧАСТИ И СТОИ, НО ОСТАНОВИТЕ СА МНОГО ОХЛАДНИ ЧАВАЛИ

  2.   Elisa каза той

    Обичам тази страница ... с изключение на първата игра. Обичам те Фран, =)
    Чао целувка на света същооооооооооо

  3.   Хелзик каза той

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

  4.   Джо Вега каза той

    Не знам защо тези ресурси се приписват на HTML5, това е чист Javascript, преди възхода на Flash, с Javascript можеха да се правят всички тези неща, имаше проучване в Барселона, което направи някои сайтове, които по това време ми взривиха главата, всичко в javascript толкова много, че се научих от тях и проектирах двойка с подскачащи топки и всичко, напълно ги загубих и все още съжалявам. Не си спомням името на студиото, беше нещо като you2 или 2you2, което беше през 98-та или така.

  5.   ASDF каза той

    Джо Вега ...... показва, че нямаш никаква идея за HTML5 ... .lol

  6.   Джо Вега каза той

    Може да нямате никаква кървава идея за html5, вярно е, но бъркате петела с кокошарника и не различавате език от околната среда. Предизвиквам ви да направите пример като тези тук, без да използвате Javascript, само с html5 и ще разберете какво имах предвид в публикацията, която изтрих. Нещо повече, разглеждах изходния код на примерите и има няколко, които могат лесно да бъдат направени, без да го монтирате през html5.
    Това, че html5 носи много подобрения и неща, които улесняват много, е вярно, но лаврите на фантастичното нещо, което е показано на тази страница, е Javascript.

  7.   Сантяго Барчета каза той

    Интересно ми е да правя презентации от този тип ... имате ли урок или страница с ресурси ??? Благодаря ти!!!