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

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

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

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

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

Булак | HongKiat

aAudio Burst Animation

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

Топ бассейни

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

Блоб Саллад

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

Бомомо

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

Браузер шары

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

көбүкчөлөрү

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

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

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

салкын саат

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

Flickr PS3 Слайдшоу

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

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

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

JS Fireworks

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

Калейдоскоп

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

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

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

Mesmerizer

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

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

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

Parallax

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

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

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

жайылуу

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

Starfield

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

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

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

толкундун

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

3D эффект

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

Canvas3D жана Flickr

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

Cloth Simulation

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

Өнүгүү желмогуз

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

google белек кутусу

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

JS Touch

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

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

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

gnuplot

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

RGraph

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

Желе Application

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

CanvasPaint

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

CanvasMol

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

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

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

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

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

Gartic эскиз

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

PhysicSketch

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

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

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

Smalltalk

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

оюн

3 зериккен

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

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

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

Canvascape

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

Аны карма

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

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

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

cubeout

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

etchaFhysics

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

Табышмак

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

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

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

Ошол эле оюн

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

Tetris

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

Торус

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