So haben Sie alle Gerüchte gehört, dass HTML5 Adobe Flash ablösen würde. Während die meisten Web-Community argumentiert, dass es möglich ist oder nicht, müssen Sie sich fragen, was macht HTML5 so mächtig, dass sogar riesige Unternehmen Apple will es verwenden, um Flash zu ersetzen.
Das ist, warum dieser Beitrag existiert, werden wir nicht darüber reden, was HTML5 tun können, sondern zeigen Live-Demos von magischen Dinge, die HTML5 mit anderen Sprachen wie JavaScript erreichen kann, so machen Sie sich bereit, inspiriert zu werden.
Hinweis: Da HTML5 von bestimmten Webbrowsern wie dem Internet Explorer nicht vollständig unterstützt wird, wird dringend empfohlen, den Firefox-Browser zu verwenden, um alle unten aufgeführten HTML5-Demos zu sehen.
Animation
Das Canvas-Element von HTML5 ist der entscheidende Faktor dafür, dass HTML5 bestimmte Flash-Animationen ersetzen kann. Es ermöglicht die dynamische, skriptfähige Darstellung von 2D-Formen und Bitmap-Bildern mit Javascript, d.h. steuerbare Animationen.
Audioburst Animation
Eine komfortable und fantastische Animation, die mit HTML5’s Canvas und Audio-Tag erstellt wurde.
Ball Pool
Diese Demo wurde auf der letzten Google I/O Veranstaltung vorgestellt und zeigt, wie dynamisch HTML5 sein kann.
Blob Sallad
Eine HTML5-gesponnene Kreatur, die Ihnen gefallen würde.
Bomomo
Mit Bomomo können Sie verschiedene atomare Bewegungen beobachten, die mit HTML5 simuliert werden.
Browser Ball
Lass dich von diesem „browserübergreifenden“ HTML5-Ball überraschen.
Bubbles
Haben Sie Spaß, indem Sie endlos schwebende Blasen mit verschiedenen Farben erstellen.
Canvas Cartoon Animation
Ein einfacher und lustiger HTML5-Cartoon, der Ihnen hilft zu verstehen, was das Canvas-Element von HTML5 alles kann.
Coolclock
Eine schöne, anpassbare Analoguhr, die mit HTML5 und JavaScript erstellt wurde.
Flickr PS3 Slideshow
Betrachten Sie Ihre Flickr-Fotos mit einer Diashow im PS3-Stil im Webbrowser.
Interaktives Polaroid
Eine interaktive Demo, die ähnlich wie ein Multi-Touch-Interface funktioniert.
JS Fireworks
Genießen Sie den Moment des Feuerwerks mit Ihrer bevorzugten Schwerkraft und Geschwindigkeit, angetrieben durch HTML5 und Javascript.
Kaleidoskop
Ein sehr schönes und futuristisches HTML5 Kaleidoskop.
Flüssigpartikel
Empfindliche Partikelanimation, die auf Ihre Mausbewegung reagiert.
Mesmerizer
Eine weitere sensible und herausragende HTML5-Demo, die zeigt, wie naheliegende Elemente auf Ihre Mausbewegung reagieren.
Nebelwolke
Verlieren Sie sich in diesem wundersamen HTML5-Nebel.
Parallaxe
Betrachten Sie alle 2D-Formen in paralleler Perspektive.
Partikelanimation
Eine elegante HTML5-Partikelanimation, die sich zu deiner bevorzugten Nachricht formen kann.
Spread
Verliere dich in dieser endlosen Spread-Animation.
Sternenfeld
Eine sehr coole HTML5-Sternenfeld-Animation, die Richtung und Geschwindigkeit basierend auf Ihrer Mausbewegung ändern würde.
Videozerstörung
Ein Klick, um ein abgespieltes Video zu zerstören.
Wellenform
Beobachten Sie, wie sich die HTML5-Canvas-Welle bewegt, indem Sie ihre Amplitude, Wellenlänge, Breite usw. ändern.
3D-Effekt
Beeindruckt von Canvas-Animation? Das ist mehr, was das Canvas-Element von HTML5 kann, und es heißt 3D-Effekt. Entwickler können sich auf das Canvas-Element, DOM und JavaScript verlassen, um einen 3D-Effekt zu erzeugen, der später zu einer 3D-Animation oder einem Spiel weiterentwickelt werden kann.
Canvas3D und Flickr
Erleben Sie eine ganz neue 3D-Erfahrung mit dem Fotostream von Flickr.
Stoffsimulation
Eine realistische, HTML5-basierte Stoffsimulation.
Evolving Monster
Beobachten Sie, wie sich ein Monster in eine komplizierte Kreatur verwandelt, deren Schöpfer HTML5 ist.
Google Giftbox
Die riesige Suchmaschine Google wird in einer spielbaren 3D-Ansicht präsentiert.
JS Touch
Ein qualitativ hochwertiges und realistisches ‚3D auf 2D-Leinwand‘ Showcase.
Datenpräsentation
Das Canvas-Element von HTML5 kann nicht nur zur Erstellung von Animationen und 3D-Effekten verwendet werden, sondern auch zur Präsentation mathematischer Daten.
Gnuplot
Gnuplot, eine Anwendung zur Datenaufzeichnung in der HTML5-Version.
RGraph
RGraph bietet eine breite Palette von Datendarstellungen wie Balkendiagramm, Fortschrittsbalken und traditionelles Radardiagramm.
Webanwendung
Schließlich kann man mit allen Möglichkeiten, die HTML5 und andere Sprachen bieten, interaktive Anwendungen oder Spiele erstellen, die einer Flash-Anwendung nahe kommen.
CanvasPaint
Der Bruder von Microsoft Paint kommt in den Webbrowser, und sein Vater ist HTML5.
CanvasMol
Eine wissenschaftliche Anwendung, die Ihnen helfen soll, die Struktur bestimmter Elemente der Erde zu verstehen.
Cartoon Builder
Zeichnen Sie interessante Cartoons mit diesem minimalen und interaktiven Cartoon Builder.
Drag Anything Here
Ziehen Sie alles, was Sie in der Demo ziehen können, um Details zu zeigen.
Gartic Sketch
Eine originelle HTML5-Anwendung, mit der Sie einige grundlegende Zeichnungen erstellen können, die in verschiedenen Bildformaten wie jpeg oder png gespeichert werden können.
PhysicSketch
Zeichne, was immer du willst, und sieh, wie sie auf die simulierte Schwerkraft reagieren.
Sketchpad
Eine leistungsstarke HTML5-Zeichenanwendung, mit der du dein Bild präzise zeichnen und bearbeiten kannst.
Smalltalk
Eine Webanwendung, die die geografische Position von wetterbezogenen Nachrichten aus Twitter bestätigt und sie zu einer Canvas-basierten „sozialen Wetterkarte“ formt, ziemlich trivial (wie vom Autor angegeben), aber interessant.
Spiel
3Bored
Es wird einem nie langweilig, wenn man in der nächsten Sekunde hunderten von HTML5-Kugeln ausweichen kann.
Breakout
Die Kugel abprallen lassen, um alle Ziegel zu zerbrechen.
Canvascape
Nicht ganz ein Spiel, aber es zeigt, wie HTML5 verwendet werden kann, um First Person Shooting Browsergame zu entwickeln.
Catch It
Wie vielen Bällen kannst du ausweichen, um dein HTML5-Quadrat zu gewinnen?
Chain Reaction
Kette die Explosion, um das Ziel zu erreichen, werde nicht süchtig.
Cubeout
Spiel Tetris in 3D, Ansicht von oben nach unten.
etchaPhysics
Zieh den Gegenstand, um den Ball zum Stern zu bewegen, vergiss nicht die Schwerkraft.
Jigsaw Puzzle
Klicke, drehe und lasse Puzzleteile fallen, um dieses HTML5-basierte Puzzle zu lösen.
Slide Puzzle
Rutsche zum Sieg, ein weiteres HTML5-Spiel, das deinen Verstand anspornt.
Same Game
Entferne eine bestimmte Gruppe, um eine andere Gruppe in der gleichen Farbe zu erhalten und du würdest schließlich einen Sieg erhalten.
Tetris
Eines der klassischsten Spiele, das durch HTML5 wieder zum Leben erweckt wurde.
Torus
Ein weiteres Tetris-Spiel in einer Pseudo-3D-Version.
Abschluss
Was ist die Grenze von HTML5? An diesem Punkt können wir nicht entscheiden, aber mit dem beeindruckenden Video unten können wir wissen, wie weit HTML5 vorangetrieben wurde:
Ja, es ist Quake II im Webbrowser, so dass es jetzt sehr klar ist, dass mit HTML5, mehr bahnbrechende Web-Anwendung würde geboren werden, um Milliarden von Internet-Nutzern dienen. Es ist schnell, es entwickelt sich weiter, und es verändert das World Wide Web. Die Frage ist, wie würden Sie dieses bahnbrechende HTML5 nutzen?
Wir würden gerne Ihre Ideen hören!