HTML5 Website Showcase: 48 potenzielle Flash-Killer-Demos

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!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.