48 demo HTML5 / CSS3 yang kejam

Pameran animasi kartun kanvas HTML5: 48 Demo Membunuh Flash Berpotensi

Saya mengambil catatan ini untuk menjawab soalan yang anda ajukan baru-baru ini dalam komen sebuah artikel:

Bilakah masa yang tepat untuk mula merancang sepenuhnya dengan HTML5?

Baiklah, secara jujur, ia bergantung pada sasaran yang anda targetkan. Sekiranya anda tidak merancang pelawat anda menggunakan Internet Explorer (mis.: Halaman perisian Mac), mulailah sekarang dengan HTML5, tetapi jika anda memerlukan orang yang mempunyai IE untuk melihat laman web anda, lebih baik anda menunggu ...

Pada entri, selepas lompat 48 demo HTML5 yang luar biasa dan wajar dilihat. Hebat adalah sedikit.

Sumber | HongKiat

aAnimasi udioburst

Animasi yang selesa dan hebat dibuat dengan kanvas dan tag audio HTML5.

pameran animasi audioburst HTML5: 48 Demo Membunuh Kilat Berpotensi

Kolam Bola

Dipamerkan dalam acara Google I / O terakhir, demo ini menunjukkan kepada anda betapa dinamiknya HTML5.

Pameran bola HTML5: 48 Demo Pembunuhan Kilat Berpotensi

Blob Salad

Makhluk bertelur HTML5 yang akan menggembirakan anda.

Paparan blob sallad HTML5: 48 Demo Membunuh Flash Berpotensi

bomo

Dengan Bomomo, anda dapat melihat pergerakan atom yang berbeza yang disimulasikan dengan HTML5.

Showcase bomomo HTML5: 48 Demo Membunuh Flash Berpotensi

Bola Penyemak Imbas

Kagum dengan bola HTML5 'penyemak imbas silang' ini.

Paparan bola penyemak imbas HTML5: 48 Demo Membunuh Flash Berpotensi

Buih

Bersenang-senang dengan membuat gelembung terapung tanpa henti dengan warna yang berbeza.

gelembung Pameran HTML5: 48 Demo Membunuh Kilat Berpotensi

Animasi Kartun Kanvas

Kartun HTML5 yang ringkas dan lucu yang membantu anda memahami apa yang boleh dilakukan oleh elemen kanvas HTML5.

Pameran animasi kartun kanvas HTML5: 48 Demo Membunuh Flash Berpotensi

Jam sejuk

Jam analog yang bagus dan disesuaikan yang dibina oleh HTML5 dan JavaScript.

Coolclock HTML5 Showcase: 48 Demo Membunuh Flash Berpotensi

Tayangan slaid Flickr PS3

Lihat foto Flickr anda dengan tayangan slaid gaya PS3 di penyemak imbas web.

flickr ps3 tayangan slaid HTML5 Pameran: 48 Potensi Demo Membunuh Kilat

Polaroid Interaktif

Demo interaktif yang berfungsi hampir sama dengan antara muka berbilang sentuhan.

Paparan HTML5 polaroid interaktif: 48 Demo Membunuh Kilat Berpotensi

Bunga Api JS

Nikmati momen bunga api dengan graviti dan kelajuan pilihan anda, dikuasakan oleh HTML5 dan Javascript.

Js fireworks HTML5 Showcase: 48 Demo Membunuh Kilat Berpotensi

Kaleidoscope

Kaleidoskop HTML5 yang sangat cantik dan futuristik.

Pameran HTML5 kaleidoskop: 48 Demo Membunuh Kilat Berpotensi

Zarah Cecair

Animasi zarah sensitif yang bertindak balas berdasarkan pergerakan tetikus anda.

Pameran zarah cecair HTML5: 48 Demo Membunuh Kilat Berpotensi

Periuk

Satu lagi demo HTML5 yang sensitif dan hebat yang menunjukkan bagaimana elemen berdekatan bertindak balas dengan pergerakan tetikus anda.

Pameran HTML5 mesmerizer: 48 Demo Membunuh Kilat Berpotensi

Awan Nebula

Tersesat dengan nebula HTML5 yang menakjubkan ini.

Pameran nebula cloud HTML5: 48 Demo Membunuh Kilat Berpotensi

Parallax

Lihat semua bentuk 2D dalam perspektif selari.

Pameran paralaks HTML5: 48 Demo Membunuh Kilat Berpotensi

Animasi Zarah

Animasi zarah HTML5 yang elegan yang dapat membentuk mesej pilihan anda.

Pameran animasi zarah HTML5: 48 Demo Membunuh Kilat Berpotensi

Spread

Tersesat dengan animasi penyebaran yang tidak berkesudahan ini.

sebarkan Pameran HTML5: 48 Demo Membunuh Flash Berpotensi

Starfield

Animasi bidang bintang HTML5 yang sangat hebat yang akan mengubah arah dan kelajuan berdasarkan pergerakan tetikus anda.

Showcase HTML5 starfield: 48 Demo Membunuh Flash Berpotensi

Pemusnahan Video

Satu klik untuk melancarkan video yang sedang dimainkan.

pemusnahan video Pameran HTML5: 48 Demo Membunuh Flash Berpotensi

Bentuk gelombang

Perhatikan bagaimana gelombang kanvas HTML5 bergerak dengan mengubah amplitud, panjang gelombang, lebar, dll.

Pameran gelombang HTML5: 48 Demo Pembunuhan Kilat Berpotensi

Kesan 3D

Terkesan dengan animasi kanvas? Itu lebih banyak elemen kanvas HTML5 yang dapat dilakukan, dan ia dipanggil kesan 3D. Pembangun boleh bergantung pada elemen kanvas, DOM dan JavaScript untuk membuat kesan 3D, yang kemudian dapat dikembangkan menjadi animasi atau permainan 3D.

Canvas3D dan Flickr

Mempunyai pengalaman 3D sepenuhnya dengan strim foto Flickr.

Canvas3d dan flickr HTML5 Showcase: 48 Potensi Demo Membunuh Flash

Simulasi Kain

Simulasi kain berasaskan HTML5 yang realistik.

paparan simulasi kain HTML5: 48 Demo Membunuh Kilat Berpotensi

Monster Berkembang

Perhatikan raksasa yang berkembang menjadi makhluk yang rumit, salah satu penciptanya adalah HTML5.

Pameran HTML5 monster yang sedang berkembang: 48 Demo Membunuh Kilat Berpotensi

Kotak Hadiah Google

Mesin carian gergasi Google dipersembahkan dalam paparan 3D yang boleh dimainkan.

Google giftbox HTML5 Showcase: 48 Demo Pembunuhan Kilat Berpotensi

Sentuhan JS

Pameran '3D on 2D Canvas' yang berkualiti tinggi dan realistik.

js touch Showcase HTML5: 48 Demo Membunuh Kilat Berpotensi

Penyampaian Data

Walaupun elemen kanvas HTML5 dapat digunakan untuk membuat animasi dan efek 3D, elemen ini juga dapat dilaksanakan untuk menyajikan data matematik.

Gnplot

Gnuplot, aplikasi plot data dalam versi HTML5.

Pameran gnuplot HTML5: 48 Demo Membunuh Kilat Berpotensi

RGrap

RGraph menyediakan pelbagai persembahan data seperti carta bar, bar kemajuan dan carta radar tradisional.

rgraph HTML5 Showcase: 48 Demo Membunuh Flash Berpotensi

Permohonan Web

Pada akhirnya, dengan menggunakan semua kemungkinan yang digabungkan dengan HTML5 dan bahasa lain, seseorang dapat membuat aplikasi atau permainan interaktif yang dekat dengan aplikasi Flash.

Cat kanvas

Saksikan saudara Microsoft Paint masuk ke penyemak imbas web anda, dan ayahnya adalah HTML5.

Canvaspaint HTML5 Showcase: 48 Potensi Demo Membunuh Kilat

CanvasMol

Aplikasi ilmiah yang dibina untuk membantu anda memahami struktur elemen bumi tertentu.

Canvasmol HTML5 Showcase: 48 Demo Membunuh Kilat Berpotensi

Pembina Kartun

Lukiskan gambar kartun yang menarik dengan pembina kartun yang minimum dan interaktif ini.

Pembangun kartun Pameran HTML5: 48 Demo Membunuh Kilat Berpotensi

Seret Apa sahaja Di Sini

Seret apa sahaja yang boleh anda seret dalam demo untuk menunjukkan perincian.

tarik apa sahaja ke sini Pameran HTML5: 48 Demo Membunuh Flash Berpotensi

Lakaran gartik

Aplikasi HTML5 asli yang membolehkan anda membuat beberapa gambar asas yang dapat disimpan ke dalam format gambar yang berbeza seperti jpeg atau png.

Sketsa gartik Pameran HTML5: 48 Demo Membunuh Kilat Berpotensi

Lakaran Fizik

Lukiskan apa sahaja yang anda suka dan lihat bagaimana reaksi mereka dengan simulasi graviti.

physicsketch HTML5 Showcase: 48 Demo Membunuh Kilat Berpotensi

Skrin padanan

Aplikasi lukisan HTML5 yang hebat yang membolehkan anda melukis dan mengedit gambar anda dengan tepat.

Paparan sketsa HTML5: 48 Demo Membunuh Kilat Berpotensi

Ceramah kecil

Aplikasi web yang mengesahkan kedudukan geografi mesej berkaitan cuaca yang diperoleh dari Twitter, sehingga membentuknya menjadi peta 'cuaca sosial' berasaskan kanvas, agak remeh (seperti yang dinyatakan oleh pengarang) tetapi menarik.

smalltalk HTML5 Showcase: 48 Demo Membunuh Flash Berpotensi

Permainan

3Bosan

Anda tidak akan pernah merasa bosan sekiranya anda dapat terus menghindari ratusan peluru HTML5 pada saat berikutnya.

Pameran HTML3 5bored: 48 Demo Membunuh Kilat Berpotensi

Breakout

Rebound bola untuk memecahkan semua batu bata.

breakout HTML5 Showcase: 48 Potensi Demo Membunuh Kilat

Kanvascape

Bukan permainan, tetapi ini menunjukkan bagaimana HTML5 dapat digunakan untuk mengembangkan permainan penyemak imbas First Person Shooting.

Canvascape HTML5 Showcase: 48 Demo Membunuh Kilat Berpotensi

Tangkaplah

Berapa banyak bola yang dapat anda hindari untuk mendapatkan kotak HTML5 yang menang?

menangkapnya HTML5 Showcase: 48 Potensi Demo Membunuh Kilat

Tindak balas rantaian

Rantai letupan untuk mencapai matlamat, jangan ketagih.

rantai reaksi HTML5 Showcase: 48 Demo Pembunuhan Kilat Berpotensi

cubeout

Mainkan Tetris dalam paparan 3D dari atas ke bawah.

cubeout HTML5 Showcase: 48 Demo Membunuh Flash Berpotensi

etchaPhizik

Lukis item untuk memindahkan bola ke bintang, jangan lupakan graviti.

etchaphysics HTML5 Showcase: 48 Potensi Demo Membunuh Kilat

Teka-teki jigsaw

Klik, putar dan lepaskan potongan teka-teki untuk menyelesaikan teka-teki berasaskan HTML5 ini.

jigsaw puzzle HTML5 Showcase: 48 Potensi Demo Membunuh Kilat

Teka-teki slaid

Luncurkan kemenangan, permainan HTML5 lain yang dibina untuk memerah jus minda anda.

slaid puzzle Showcase HTML5: 48 Demo Membunuh Flash Berpotensi

Permainan yang sama

Keluarkan kumpulan tertentu untuk mendapatkan kumpulan lain yang berpasangan dengan warna yang sama dan anda akhirnya akan mendapat kemenangan.

permainan yang sama HTML5 Showcase: 48 Potensi Demo Membunuh Flash

Tetris

Salah satu permainan paling klasik yang dihidupkan kembali oleh HTML5.

tetris HTML5 Showcase: 48 Demo Membunuh Flash Berpotensi

torus

Satu lagi permainan Tetris dalam versi pseudo-3D.

torus HTML5 Showcase: 48 Demo Membunuh Flash Berpotensi


Tinggalkan komen anda

Alamat email anda tidak akan disiarkan. Ruangan yang diperlukan ditanda dengan *

*

*

  1. Bertanggungjawab atas data: Miguel Ángel Gatón
  2. Tujuan data: Mengendalikan SPAM, pengurusan komen.
  3. Perundangan: Persetujuan anda
  4. Komunikasi data: Data tidak akan disampaikan kepada pihak ketiga kecuali dengan kewajiban hukum.
  5. Penyimpanan data: Pangkalan data yang dihoskan oleh Occentus Networks (EU)
  6. Hak: Pada bila-bila masa anda boleh menghadkan, memulihkan dan menghapus maklumat anda.

  1.   Lollipop kata

    TETRIS TIDAK PERGI, SAYA MENGHASILKAN DUA PIEC PADA DAN TINGGAL TETAPI REST ADALAH SANGAT KERING

  2.   Elisa kata

    Saya suka halaman ini ... kecuali permainan pertama. Saya sayang awak Fran =)
    Selamat mencium dunia juga

  3.   Helsik kata

    Luar biasa, hebat. Saya tidak percaya sejauh mana perkembangan web!

  4.   Joe vega kata

    Saya tidak tahu mengapa sumber daya ini dikaitkan dengan HTML5, ini adalah Javascript yang murni, sebelum munculnya Flash, dengan Javascript semua perkara ini dapat dilakukan, ada kajian di Barcelona yang membuat beberapa laman web yang pada waktu itu meledakkan kepalaku, semuanya dalam javascript sehingga saya belajar dari mereka dan merancang pasangan dengan bola yang melantun dan semuanya, saya kehilangan mereka sepenuhnya dan masih menyesalinya. Saya tidak ingat nama studio itu seperti anda 2 atau 2 tahun yang berusia 2 atau lebih.

  5.   ASDF kata

    Joe Vega ...... ini menunjukkan bahawa anda tidak mempunyai idea HTML5… .lol

  6.   Joe vega kata

    Anda mungkin tidak mempunyai idea html5 berdarah, memang benar, tetapi anda salah anggap ayam jantan untuk kandang ayam dan jangan membezakan bahasa dari persekitaran. Saya mencabar anda untuk membuat contoh seperti di sini tanpa menggunakan Javascript, hanya dengan html5, dan anda akan memahami apa yang saya maksudkan dalam jawatan yang saya hapus. Lebih-lebih lagi, saya telah melihat kod sumber contoh dan terdapat beberapa yang boleh dilakukan dengan mudah tanpa memasangnya di html5.
    Html5 itu membawa banyak penambahbaikan dan perkara-perkara yang memudahkan banyak adalah benar, tetapi kejayaan perkara hebat yang ditunjukkan di halaman ini adalah Javascript.

  7.   santiago barcheta kata

    Saya berminat untuk membuat persembahan jenis ini ... adakah anda mempunyai tutorial atau halaman dengan sumber ??? Terima kasih!!!