48 acımasız HTML5 / CSS3 demosu

Bu yazıyı, son zamanlarda bir makalenin yorumlarında sorduğunuz bir soruyu cevaplamak için alıyorum:

Tamamen HTML5 ile tasarım yapmaya başlamak için ne zaman iyi bir zaman?

Doğrusu, hedeflediğiniz hedefe bağlı. Ziyaretçilerinizin Internet Explorer'ı (ör. Mac yazılım sayfası) kullanmasını planlamıyorsanız, hemen HTML5 ile başlayın, ancak web sitenizi görmek için IE'li kişilere ihtiyacınız varsa, beklemeniz daha iyi olur ...

Girişle ilgili olarak, şaşırtıcı ve görülmeyi hak eden HTML48'in 5 gösterisinden sonra. Büyük küçüktür.

Kaynak | Hongkiat

audioburst Animasyon

HTML5'in tuvali ve ses etiketi ile oluşturulmuş rahat ve harika bir animasyon.

Top havuzu

Son Google I / O etkinliğinde sergilenen bu demo, HTML5'in ne kadar dinamik olabileceğini gösteriyor.

salçalı salata

Sizi memnun edecek, HTML5 ile üretilmiş bir yaratık.

bomomo

Bomomo ile HTML5 ile simüle edilmiş farklı atomik hareketleri gözlemleyebilirsiniz.

Tarayıcı Topu

Bu "tarayıcılar arası" HTML5 topuna hayran kalın.

Bubbles

Farklı renkte sonsuz yüzen baloncuklar oluşturarak eğlenin.

Kanvas Çizgi Film Animasyonu

HTML5'in canvas öğesinin neler yapabileceğini anlamanıza yardımcı olan basit ve eğlenceli bir HTML5 çizgi filmi.

Soğuk Saat

HTML5 ve JavaScript ile oluşturulmuş hoş, özelleştirilebilir bir analog saat.

Flickr PS3 Slayt Gösterisi

Flickr'ınızın fotoğraflarını web tarayıcısında PS3 tarzı slayt gösterisiyle görüntüleyin.

Etkileşimli Polaroid

Çoklu dokunmatik arayüze oldukça benzer şekilde çalışan etkileşimli bir demo.

JS Havai Fişekleri

HTML5 ve Javascript ile desteklenen tercih ettiğiniz yerçekimi ve hız ile havai fişek anının tadını çıkarın.

Kaleydoskop

Çok güzel ve fütürist bir HTML5 kaleydoskop.

Sıvı Parçacıklar

Fare hareketinize göre tepki veren hassas parçacık animasyonu.

Büyüleyici

Yakındaki öğelerin fare hareketinizle nasıl tepki verdiğini gösteren bir başka hassas ve olağanüstü HTML5 demosu.

Bulutsu Bulutu

Bu harika HTML5 bulutsusu ile kaybolun.

Paralaks

Tüm 2B şekilleri paralel perspektifte görüntüleyin.

Parçacık Animasyonu

Tercih ettiğiniz mesaja dönüşebilen zarif bir HTML5 parçacık animasyonu.

yayılma

Bu sonsuz yayılma animasyonuyla kaybolun.

Starfield

Fare hareketinize bağlı olarak yön ve hızı değiştiren çok güzel bir HTML5 yıldız alanı animasyonu.

Video İmha

Oynatılan bir videoyu patlatmak için tek tıklama.

Dalga Formu

HTML5'in tuval dalgasının genliğini, dalga boyunu, genişliğini vb. Değiştirerek nasıl hareket ettiğine dikkat edin.

3D Etkisi

Tuval animasyonundan etkilendiniz mi? Bu, HTML5'in tuval öğesinin daha fazlasını yapabilir ve buna 3D efekt denir. Geliştirici, daha sonra 3D animasyon veya oyunda geliştirilebilecek 3D efekt oluşturmak için tuval öğesine, DOM ve JavaScript'e güvenebilir.

Canvas3D ve Flickr

Flickr'ın fotoğraf akışı ile yepyeni bir 3D deneyimi yaşayın.

Kumaş Simülasyonu

Gerçekçi, HTML5 tabanlı bir kumaş simülasyonu.

Gelişen Canavar

Karmaşık bir yaratığa dönüşen bir canavarı gözlemleyin, yaratıcısından biri HTML5'tir.

Google Hediye Kutusu

Dev arama motoru Google, 3D, oynanabilir görünümde sunulur.

JS Dokunmatik

Yüksek kaliteli ve gerçekçi bir '3D Canvas'da 2D' vitrin.

Veri sunumu

HTML5'in tuval öğesi, animasyon ve 3D efekt oluşturmak için kullanılabilirken, matematiksel verileri sunmak için de uygulanabilir.

gnuplot

Gnuplot, HTML5 sürümünde bir veri çizim uygulaması.

RGraph

RGraph, çubuk grafik, ilerleme çubuğu ve geleneksel radar grafiği gibi çok çeşitli veri sunumu sağlar.

Web Uygulaması

Nihayetinde, HTML5 ve diğer dil ile birleştirilen tüm olasılıkları kullanarak, Flash uygulamasına yakın etkileşimli uygulama veya oyun oluşturabilirsiniz.

TuvalBoya

Microsoft Paint'in kardeşinin web tarayıcınıza girdiğine ve babasının HTML5 olduğuna tanık olun.

TuvalMol

Belirli dünya elementlerinin yapısını anlamanıza yardımcı olmak için oluşturulmuş bilimsel bir uygulama.

Karikatür Oluşturucu

Bu minimal ve etkileşimli karikatür oluşturucu ile ilginç çizgi film resmi çizin.

Buraya Her Şeyi Sürükleyin

Ayrıntıları göstermek için demoda sürükleyebileceğiniz her şeyi sürükleyin.

Gartik eskiz

Jpeg veya png gibi farklı görüntü formatlarında kaydedilebilen bazı temel çizimler yapmanızı sağlayan orijinal bir HTML5 uygulaması.

FizikSketch

İstediğinizi çizin ve simüle edilmiş yerçekimi ile nasıl tepki verdiklerini görün.

Eskiz

Görüntünüzü tam olarak çizmenizi ve düzenlemenizi sağlayan güçlü bir HTML5 çizim uygulaması.

Smalltalk

Twitter'dan alınan hava durumu ile ilgili mesajın coğrafi konumunu doğrulayan ve böylece onları tuval tabanlı bir 'sosyal hava durumu' haritası haline getiren, oldukça önemsiz (yazarın belirttiği gibi) ancak ilginç bir web uygulaması.

oyun

3 Boynuzlu

Önümüzdeki saniyede yüzlerce HTML5 mermisinden kaçmayı başarırsanız asla sıkılmazsınız.

Kaçmak

Tüm tuğlaları kırmak için topa geri dönün.

tuval

Tam olarak bir oyun değil, ancak First Person Shooting tarayıcı oyununu geliştirmek için HTML5'in nasıl kullanılabileceğini gösteriyor.

Yakala onu

Kazanan HTML5 karenizi elde etmek için kaç topu atlatabilirsiniz?

Zincirleme reaksiyon

Hedefe ulaşmak için patlamayı zincirleyin, bağımlı olmayın.

küp çıkışı

Tetris'i yukarıdan aşağıya 3D olarak oynayın.

etchaFizik

Topu yıldıza taşımak için eşya çizin, yerçekimini unutma.

Bozyap

Bu HTML5 tabanlı yapboz bulmacayı çözmek için yapboz parçalarını tıklayın, döndürün ve bırakın.

Slayt Puzzle

Zihninizi sıkmak için tasarlanmış başka bir HTML5 oyunu olan zafere kaydırın.

Aynı oyun

Aynı renkte eşleştirilmiş başka bir grup elde etmek için belirli bir grubu çıkarın ve sonunda bir zaferle ödüllendirileceksiniz.

Tetris

HTML5 ile hayata döndürülen en klasik oyunlardan biri.

yumru

Yine sözde 3D versiyonunda başka bir Tetris oyunu.