48 demo brutal HTML5 / CSS3

Saya mengambil posting ini untuk menjawab pertanyaan yang Anda ajukan baru-baru ini di komentar sebuah artikel:

Kapan saat yang tepat untuk mulai mendesain sepenuhnya dengan HTML5?

Jujur saja, itu tergantung dari target yang Anda targetkan. Jika Anda tidak merencanakan pengunjung Anda untuk menggunakan Internet Explorer (misalnya: halaman perangkat lunak Mac), mulailah langsung dengan HTML5, tetapi jika Anda membutuhkan orang dengan IE untuk melihat situs web Anda, sebaiknya Anda menunggu ...

Tentang pintu masuk, baik setelah melompat 48 demo HTML5 yang luar biasa dan pantas untuk dilihat. Sedikit bagus.

Sumber | HongKiat

aAnimasi udioburst

Animasi yang nyaman dan fantastis dibuat dengan kanvas HTML5 dan tag audio.

Kolam bola

Dipamerkan di acara Google I / O terakhir, demo ini menunjukkan kepada Anda betapa dinamisnya HTML5.

Salad gumpalan

Makhluk bertelur HTML5 yang akan menyenangkan Anda.

bomomo

Dengan Bomomo, Anda dapat mengamati pergerakan atom berbeda yang disimulasikan dengan HTML5.

Bola Browser

Buat kagum dengan bola HTML5 'lintas-browser' ini.

gelembung

Bersenang-senang dengan membuat gelembung mengambang tanpa akhir dengan warna berbeda.

Animasi Kartun Kanvas

Kartun HTML5 sederhana dan lucu yang membantu Anda memahami apa yang dapat dilakukan elemen kanvas HTML5.

jam keren

Jam analog yang bagus dan dapat disesuaikan yang dibangun oleh HTML5 dan JavaScript.

Slideshow Flickr PS3

Lihat foto Flickr Anda dengan tampilan slide gaya PS3 di browser web.

Polaroid Interaktif

Demo interaktif yang bekerja sangat mirip dengan antarmuka multi sentuh.

Kembang Api JS

Nikmati momen kembang api dengan gravitasi dan kecepatan pilihan Anda, diberdayakan oleh HTML5 dan Javascript.

Kaledoskop

Kaleidoskop HTML5 yang sangat cantik dan futuristik.

Partikel Cair

Animasi partikel sensitif yang bereaksi berdasarkan gerakan mouse Anda.

pemikat

Demo HTML5 sensitif dan luar biasa lainnya yang menunjukkan bagaimana elemen di sekitar bereaksi dengan gerakan mouse Anda.

Awan Nebula

Tersesat dengan nebula HTML5 yang menakjubkan ini.

Parallax

Lihat semua bentuk 2D dalam perspektif paralel.

Animasi Partikel

Animasi partikel HTML5 yang elegan yang dapat dibentuk menjadi pesan pilihan Anda.

Penyebaran

Tersesat dengan animasi penyebaran tanpa akhir ini.

Starfield

Animasi starfield HTML5 yang sangat keren yang akan mengubah arah dan kecepatan berdasarkan gerakan mouse Anda.

Penghancuran Video

Satu klik untuk merekam video yang sedang diputar.

Waveform

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

Efek 3D

Terkesan dengan animasi kanvas? Itu lebih banyak elemen kanvas HTML5 yang dapat dilakukan, dan ini disebut efek 3D. Pengembang dapat mengandalkan elemen kanvas, DOM dan JavaScript untuk menciptakan efek 3D, yang nantinya dapat dikembangkan menjadi animasi atau game 3D.

Canvas3D dan Flickr

Dapatkan pengalaman 3D yang sama sekali baru dengan photostream Flickr.

Simulasi Kain

Simulasi kain berbasis HTML5 yang realistis.

Monster yang Berkembang

Amati monster yang berkembang menjadi makhluk yang rumit, salah satu penciptanya adalah HTML5.

Kotak Hadiah Google

Mesin pencari raksasa Google disajikan dalam 3D, tampilan yang dapat dimainkan.

Sentuhan JS

Etalase '3D pada Kanvas 2D' berkualitas tinggi dan realistis.

Presentasi Data

Meskipun elemen kanvas HTML5 dapat digunakan untuk membuat animasi dan efek 3D, elemen kanvas juga dapat diterapkan untuk menyajikan data matematika.

gnuplot

Gnuplot, aplikasi pembuatan plot data dalam versi HTML5.

Grafik R

RGraph menyediakan berbagai presentasi data seperti bagan batang, bilah kemajuan, dan bagan radar tradisional.

Aplikasi web

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

KanvasCat

Saksikan saudara dari Microsoft Paint masuk ke browser web Anda, dan ayahnya adalah HTML5.

KanvasMol

Sebuah aplikasi ilmiah yang dibangun untuk membantu Anda memahami struktur elemen bumi tertentu.

Pembuat Kartun

Gambarlah gambar kartun yang menarik dengan pembuat kartun minimal dan interaktif ini.

Seret Apa Saja ke Sini

Seret apa pun yang dapat Anda seret di demo untuk menampilkan detailnya.

Sketsa gartic

Aplikasi HTML5 asli yang memungkinkan Anda membuat beberapa gambar dasar yang dapat disimpan ke dalam format gambar yang berbeda seperti jpeg atau png.

FisikaSketsa

Gambar apa pun yang Anda suka dan lihat bagaimana reaksi mereka dengan simulasi gravitasi.

Sketsa

Aplikasi menggambar HTML5 yang kuat yang memungkinkan Anda menggambar dan mengedit gambar dengan cara yang tepat.

Smalltalk

Sebuah aplikasi web yang mengonfirmasi posisi geografis dari pesan terkait cuaca yang didapat dari Twitter, sehingga membentuknya menjadi peta 'cuaca sosial' berbasis kanvas, cukup sepele (seperti yang dikemukakan oleh penulis) tetapi menarik.

Permainan

3 Bosan

Anda tidak akan pernah bosan jika Anda terus menghindari ratusan peluru HTML5 di detik berikutnya.

Keluar

Rebound bola untuk menghancurkan semua batu bata.

Pemandangan kanvas

Bukan sebuah game, tetapi ini menunjukkan bagaimana HTML5 dapat digunakan untuk mengembangkan game browser First Person Shooting.

Tangkap

Berapa banyak bola yang bisa Anda hindari untuk mendapatkan kotak HTML5 Anda yang menang?

Reaksi berantai

Rantai ledakan untuk mencapai tujuan, jangan sampai ketagihan.

Kubus

Mainkan Tetris dalam 3D, tampilan dari atas ke bawah.

etsaFisika

Gambarlah benda untuk memindahkan bola ke bintang, jangan lupakan gravitasi.

Puzzle Jigsaw

Klik, putar, dan jatuhkan potongan puzzle untuk memecahkan teka-teki gambar berbasis HTML5 ini.

Teka-teki slide

Menuju kemenangan, game HTML5 lain yang dibuat untuk memeras jus pikiran Anda.

Game yang sama

Hapus grup tertentu untuk mendapatkan grup lain yang dipasangkan dengan warna yang sama dan Anda akhirnya akan diberikan kemenangan.

Tetris

Salah satu game paling klasik yang dihidupkan kembali oleh HTML5.

torus

Namun game Tetris lainnya dalam versi pseudo-3D.