48 ырайымсыз HTML5 / CSS3 демосу

кенеп мультфильм HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Жакында бир макаланын комментарийинде берген суроону чечүү үчүн ушул постту алып жатам:

HTML5 менен толук иштеп чыгууну баштоого качан жакшы убакыт келет?

Ооба, чынын айтканда, бул сиз бутага алган максатыңызга жараша болот. Эгер сиз Internet Explorer программасын колдонууну каалабасаңыз (мис. Mac программалык баракчасы), анда дароо HTML5тен баштаңыз, бирок IEге ээ адамдар сиздин веб-сайтыңызды көрүшү керек болсо, анда күтө турсаңыз ...

Секирүүдөн кийин HTML48тин 5 демосу таң калыштуу жана көрүүгө татыктуу. Улуу кичинекей.

Булак | HongKiat

audioburst Animation

HTML5тин полотносу жана аудио теги менен түзүлгөн ыңгайлуу жана фантастикалык анимация.

audioburst анимациясы HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Топ бассейни

Акыркы Google I / O иш-чарасында көрсөтүлгөн бул демо HTML5 канчалык динамикалуу боло тургандыгын көрсөтөт.

топ бассейн HTML5 Витринасы: 48 Потенциалдуу Флешти өлтүрүү демосу

Блоб Саллад

Сизге жаккан HTML5 тукуму.

blob sallad HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Бомомо

Bomomo менен HTML5 менен окшоштурулган ар кандай атомдук кыймылдарды байкай аласыз.

bomomo HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Браузер шары

Бул HTML кросс-браузери менен таң калыңыз.

браузердин топу HTML5 Көргөзмө: 48 Потенциалдуу Flash Killing Demos

көбүкчөлөрү

Ар кандай түстөгү чексиз сүзүүчү көбүкчөлөрдү жаратуу менен көңүл ачыңыз.

көбүктөрү HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Canvas мультфильм анимациясы

HTML5тин полотносу эмне кыла алаарын түшүнүүгө жардам берген жөнөкөй жана күлкүлүү HTML5 мультфильм.

кенеп мультфильм HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Coolclock

HTML5 жана JavaScript тарабынан курулган жагымдуу, настройкаланган аналог саат.

coolclock HTML5 Витринасы: 48 Потенциалдуу Флешти Өлтүрүү Демосу

Flickr PS3 Слайдшоу

Веб браузерден PS3 стилиндеги слайдшоу менен Flickr сүрөттөрүңүздү көрүңүз.

flickr ps3 слайдшоу HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

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

Көп тийүү интерфейсине окшош иштеген интерактивдүү демо.

интерактивдүү поляроид HTML5 көргөзмөсү: 48 Потенциалдуу Flash Killing Demos

JS Fireworks

HTML5 жана Javascript менен иштелип чыккан салмактуу күч жана ылдамдык менен фейерверк учурунан ырахат алыңыз.

js fireworks HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Калейдоскоп

Абдан сонун жана футуристтик HTML5 калейдоскопу.

калейдоскоп HTML5 Витринасы: 48 Потенциалдуу Flash Killing Demos

Суюк бөлүкчөлөр

Чычкандын кыймылына жараша реакция кылган сезгич бөлүкчөлөр анимациясы.

суюктук бөлүкчөлөрү HTML5 Витринасы: 48 Потенциалдуу Flash Killing Demos

Mesmerizer

Дагы бир сезгич жана көрүнүктүү HTML5 демосу, сизге жакын жайгашкан элементтер чычкан кыймылына кандайча реакция кыларын көрсөтөт.

mesmerizer HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Тумандык булут

Бул кереметтүү HTML5 тумандуулугу менен жоголуп кетиңиз.

тумандуулук булут HTML5 Витринасы: 48 Потенциалдуу Flash Killing Demos

Parallax

Бардык 2D фигураларын параллель перспективада көрүңүз.

parallax HTML5 Витринасы: 48 Потенциалдуу Флешти Өлтүрүү Демосу

Бөлүкчөлөрдүн анимациясы

Сиз каалаган билдирүү түзө алган жарашыктуу HTML5 бөлүкчөлөрүнүн анимациясы.

бөлүкчөлөрдүн анимациясы HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

жайылуу

Ушул чексиз жайылган анимация менен жоголуп кетиңиз.

жайылтуу HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Starfield

Сиздин чычкан кыймылынын негизинде багытын жана ылдамдыгын өзгөртө турган абдан сонун HTML5 жылдызча анимациясы.

starfield HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Видео жок кылуу

Видеону ойнотуу үчүн бир чыкылдатыңыз.

видеону жок кылуу HTML5 Көргөзмөсү: 48 Потенциалдуу Flash Killing Demos

толкундун

HTML5тин полотнодогу толкуну анын амплитудасын, толкун узундугун, туурасын ж.б. өзгөртүү менен кандайча кыймылдай тургандыгына көңүл буруңуз.

толкун формасы HTML5 Витринасы: 48 Потенциалдуу Флешти өлтүрүү демосу

3D эффект

Полотнодогу анимация таасирлендиби? Бул HTML5 полотносунун элементин жасай алат жана ал 3D эффект деп аталат. 3D эффектин түзүү үчүн, кенеп элементине, DOM жана JavaScriptке таянса болот, ал кийинчерээк 3D анимациясы же оюну катары иштелип чыгышы мүмкүн.

Canvas3D жана Flickr

Flickrдин фототрансляциясы менен жаңы 3D тажрыйбасына ээ болуңуз.

canvas3d and flickr HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Cloth Simulation

HTML5 негизиндеги кездеменин симуляциясы.

кездеменин симуляциясы HTML5 Витринасы: 48 Потенциалдуу Flash Killing Demos

Evolving Monster

Татаал жандыкка айланып бараткан желмогузга байкоо салыңыз, анын жаратуучуларынын бири HTML5.

өнүгүп келе жаткан монстр HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Google Giftbox

Google издөө тутуму 3D форматында, ойнотула турган көрүнүштө берилген.

google giftbox HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

JS Touch

Жогорку сапаттагы жана реалдуу '3Dдеги 2D полотнодогу' витрина.

js touch HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

маалымат берүү

HTML5тин полотносун анимация жана 3D эффектин түзүү үчүн колдонсо болот, бирок аны математикалык маалыматтарды көрсөтүү үчүн дагы ишке ашырса болот.

Gnuplot

Gnuplot, HTML5 версиясындагы маалыматтарды пландоочу тиркеме.

gnuplot HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

RGraph

RGraph тилке диаграммасы, прогресс тилкеси жана салттуу радар диаграммасы сыяктуу кеңири маалымат презентациясын камсыз кылат.

rgraph HTML5 Көргөзмөсү: 48 Потенциалдуу Флешти Өлтүрүү Демосу

Желе Application

Акыры HTML5 жана башка лангауж айкалыштырылган бардык мүмкүнчүлүктөрдү колдонуп, Flash тиркемесине жакын интерактивдүү тиркеме же оюн түзсө болот.

CanvasPaint

Microsoft Paint иниси сиздин веб-браузериңизге кирип, анын атасы HTML5 экенине күбө болуңуз.

canvaspaint HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

CanvasMol

Жердин айрым элементтеринин түзүлүшүн түшүнүүгө жардам берүү үчүн курулган илимий тиркеме.

canvasmol HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Мультфильм куруучу

Бул минималдуу жана интерактивдүү мультфильм куруучу менен кызыктуу мультфильм сүрөтүн тартыңыз.

мультфильм куруучусу HTML5 Көргөзмөсү: 48 Потенциалдуу Flash Killing Demos

Anywhere сүйрөп барыңыз

Чоо-жайын көрсөтүү үчүн демону сүйрөп бара турган нерсенин бардыгын сүйрөңүз.

HTML5 Showcase: 48 Potening Flash Killing Demos

Gartic эскиз

Jpeg же png сыяктуу ар кандай сүрөттөр форматына сактоого мүмкүн болгон айрым негизги чиймелерди жасоого мүмкүндүк берген оригиналдуу HTML5 тиркемеси.

gartic sketch HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

PhysicSketch

Өзүңүзгө жаккан нерсенин сүрөтүн тартыңыз жана алардын жасалма тартылуу күчү менен кандай реакция жасаарын көрүңүз.

physicsketch HTML5 Витринасы: 48 Потенциалдуу Флэш Өлтүрүү Демолору

Эскиз тактасы

Сүрөтүңүздү так тариздөөгө жана түзөтүүгө мүмкүнчүлүк берген күчтүү HTML5 сүрөт колдонмосу.

sketchpad HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Smalltalk

Твиттерден алынган аба ырайына байланыштуу билдирүүнүн географиялык абалын тастыктаган веб-тиркеме, андыктан аларды кенепке негизделген "социалдык аба-ырайы" картасында калыптандырат, анча-мынча мааниге ээ эмес (автор айткандай), бирок кызыктуу.

smalltalk HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

оюн

3 зериккен

Кийинки секундда жүздөгөн HTML5 октон качып кете берсеңиз, эч качан тажабайсыз.

3bored HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Бөлүнүп чыгуу

Бардык кирпичтерди сындыруу үчүн топту артка кайтарыңыз.

breakout HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Canvascape

Оюн эмес, бирок HTML5 аркылуу First Person Shooting браузер оюнун кантип өнүктүрсө болот.

canvascape HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Catch It

Сиздин утуп алган HTML5 чарчыңызды алуу үчүн канча топтон качса болот?

HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

чынжыкр реакциясы

Максатка жетүү үчүн жарылууну чынжыр менен байлап алыңыз, көз каранды болбойсуз.

Чынжыр реакциясы HTML5 Көргөзмөсү: 48 Потенциалдуу Флешти Өлтүрүү Демосу

Cubeout

Тетристи 3D, өйдө жактан ылдый көрүнүштө ойнотуңуз.

cubeout HTML5 Витринасы: 48 Потенциалдуу Флешти Өлтүрүү Демосу

etchaFhysics

Топту жылдызга жылдыруу үчүн нерсени тартыңыз, тартылуу күчү жөнүндө унутпаңыз.

etchaphysics HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Табышмак

Бул HTML5 негизиндеги табышмакты чечүү үчүн табышмак бөлүктөрүн чыкылдатыңыз, айландырыңыз жана таштаңыз.

табышмак HTML5 көргөзмөсү: 48 Потенциалдуу Flash Killing Demos

Слайд Табышмак

Акылыңыздын ширесин сыгып алуу үчүн курулган дагы бир HTML5 оюну жеңишке карай жылыңыз.

слайд табышмак HTML5 Көргөзмө: 48 Потенциалдуу Flash Killing Demos

Ошол эле оюн

Ушул эле түстөгү башка топту жупташтыруу үчүн белгилүү бир топту алып салыңыз, ошондо сизге жеңиш берилет.

ошол эле оюн HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Tetris

HTML5 тарабынан тирилген эң классикалык оюндардын бири.

tetris HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos

Торус

Псевдо-3D версиясындагы дагы бир тетрис оюну.

torus HTML5 Showcase: 48 Потенциалдуу Flash Killing Demos


Макаланын мазмуну биздин принциптерге карманат редакциялык этика. Ката жөнүндө кабарлоо үчүн чыкылдатыңыз бул жерде.

7 комментарий, өзүңүздүкүн калтырыңыз

Комментарий калтырыңыз

Сиздин электрондук почта дареги жарыяланбайт. Милдеттүү талаалар менен белгиленет *

*

*

  1. Маалыматтар үчүн жооптуу: Мигель Анхель Гатан
  2. Маалыматтын максаты: СПАМды көзөмөлдөө, комментарийлерди башкаруу.
  3. Мыйзамдуулук: Сиздин макулдугуңуз
  4. Маалыматтарды берүү: Маалыматтар үчүнчү жактарга юридикалык милдеттенмелерден тышкары билдирилбейт.
  5. Маалыматтарды сактоо: Occentus Networks (ЕС) тарабынан уюштурулган маалыматтар базасы
  6. Укуктар: Каалаган убакта маалыматыңызды чектеп, калыбына келтирип жана жок кыла аласыз.

  1.   Чупатина ал мындай деди:

    Тетрис барбайт, мен эки бөлүктү салып, токтоп турам, бирок эс алуу аябай муздак

  2.   Elisa ал мындай деди:

    Мен бул баракчаны жакшы көрөм ... биринчи оюндан тышкары. Мен сени сүйөм Fran =)
    Дүйнөгө өбүүңүз менен даooooooooooo

  3.   Helsic ал мындай деди:

    Укмуш, укмуштай. Желе иштеп чыгуу канчалык деңгээлде жеткенине ишене албай турам!

  4.   Джо Вега ал мындай деди:

    Бул ресурстар эмне үчүн HTML5ке таандык экендигин билбейм, бул таза Javascript, Flash пайда болгонго чейин, Javascript менен ушул нерселердин бардыгы жасалышы мүмкүн эле, Барселонада бир изилдөө болуп, ошол учурда кээ бир сайттар менин башымды жарды, Бардыгы javascriptте болгондуктан, мен алардан сабак алып, секирип келе жаткан топтор менен жуптарды ойлоп таптым, аларды таптакыр жоготуп алдым жана дагы деле болсо өкүнөм Студиянын аты эсимде жок, ал сизге окшогон нерсе2 же 2you2 '98 же XNUMX-жылдары болгон.

  5.   ASDF ал мындай деди:

    Джо Вега ....... бул HTML5 жөнүндө эч кандай түшүнүгүңүз жок экендигин көрсөтүп турат ... .lol

  6.   Джо Вега ал мындай деди:

    Сизде эч кандай кандуу HTML5 идеясы жок болушу мүмкүн, бул чын, бирок сиз короз менен тооккананы аралаштырып, тилди чөйрөдөн айырмалабайсыз. Бул жердеги мисалдарды Javascriptти колдонбостон, html5 менен гана жасоого чакырам, ошондо мен өчүргөн постто эмнени айткым келгенин түшүнөсүз. Андан тышкары, мен мисалдардын баштапкы кодун карап жаттым жана аны HTML5ке орнотпостон оңой эле жасасак болот.
    Бул HTML5 көптөгөн өркүндөтүүлөрдү алып келет жана көп нерсени жеңилдетет, бирок бул беттеги фантастикалык нерсенин жетишкендиктери Javascript болуп саналат.

  7.   Сантьяго Барчетта ал мындай деди:

    Мага ушул түрдөгү презентацияларды жасоого кызыкдармын ... сизде окуу куралы же ресурстар бар баракча барбы ??? Рахмат!!!