48 brutale HTML5 / CSS3-Demos

Leinwand Cartoon Animation HTML5 Showcase: 48 potenzielle Flash Killing Demos

Ich nehme diesen Beitrag, um eine Frage zu beantworten, die Sie kürzlich in den Kommentaren eines Artikels gestellt haben:

Wann ist ein guter Zeitpunkt, um vollständig mit HTML5 zu entwerfen?

Ehrlich gesagt hängt es von dem Ziel ab, auf das Sie abzielen. Wenn Sie nicht vorhaben, dass Ihre Besucher den Internet Explorer verwenden (z. B. Mac-Softwareseite), beginnen Sie sofort mit HTML5. Wenn Sie jedoch Benutzer mit IE benötigen, um Ihre Website zu sehen, sollten Sie besser warten ...

Auf dem Eintrag, weit nach dem Sprung 48 Demos von HTML5, die erstaunlich sind und es verdienen, gesehen zu werden. Groß ist klein.

Quelle | Hongkong

aAudioburst-Animation

Eine komfortable und fantastische Animation, die mit der Leinwand und dem Audio-Tag von HTML5 erstellt wurde.

Audioburst-Animation HTML5-Showcase: 48 potenzielle Flash-Killing-Demos

Bällebad

Diese Demo wird im letzten Google I / O-Ereignis vorgestellt und zeigt Ihnen, wie dynamisch HTML5 sein kann.

Ball Pool HTML5 Showcase: 48 potenzielle Flash Killing Demos

Blob Salad

Eine HTML5-gespawnte Kreatur, die Ihnen gefallen würde.

blob sallad HTML5 Showcase: 48 potenzielle Flash Killing Demos

Bomo

Mit Bomomo können Sie verschiedene atomare Bewegungen beobachten, die mit HTML5 simuliert wurden.

bomomo HTML5 Showcase: 48 potenzielle Flash Killing Demos

Browserball

Lassen Sie sich von diesem browserübergreifenden HTML5-Ball überraschen.

Browser Ball HTML5 Showcase: 48 potenzielle Flash Killing Demos

Bubbles

Viel Spaß beim Erstellen endloser schwebender Blasen mit verschiedenen Farben.

Bubbles HTML5 Showcase: 48 potenzielle Flash Killing Demos

Leinwand Cartoon Animation

Ein einfacher und lustiger HTML5-Cartoon, mit dem Sie verstehen, was das Canvas-Element von HTML5 leisten kann.

Leinwand Cartoon Animation HTML5 Showcase: 48 potenzielle Flash Killing Demos

coole Uhr

Eine schöne, anpassbare analoge Uhr, die aus HTML5 und JavaScript besteht.

coolclock HTML5 Showcase: 48 potenzielle Flash Killing Demos

Flickr PS3 Diashow

Zeigen Sie die Fotos Ihres Flickr mit einer Diashow im PS3-Stil im Webbrowser an.

flickr ps3 Diashow HTML5 Showcase: 48 potenzielle Flash Killing Demos

Interaktives Polaroid

Eine interaktive Demo, die der Multi-Touch-Oberfläche ziemlich ähnlich ist.

interaktives Polaroid HTML5 Showcase: 48 potenzielle Flash Killing Demos

JS Feuerwerk

Genießen Sie den Moment des Feuerwerks mit Ihrer bevorzugten Schwerkraft und Geschwindigkeit, unterstützt von HTML5 und Javascript.

js Feuerwerk HTML5 Showcase: 48 potenzielle Flash Killing Demos

Kaleidoscope

Ein sehr schönes und futuristisches HTML5-Kaleidoskop.

kaleidoscope HTML5 Showcase: 48 potenzielle Flash Killing Demos

Flüssige Partikel

Sensible Partikelanimation, die basierend auf Ihrer Mausbewegung reagiert.

flüssige Partikel HTML5 Showcase: 48 potenzielle Flash Killing Demos

Hypnotisierer

Eine weitere sensible und herausragende HTML5-Demo, die zeigt, wie Elemente in der Nähe mit Ihrer Mausbewegung reagieren.

Mesmerizer HTML5 Showcase: 48 potenzielle Flash Killing Demos

Nebelwolke

Verlieren Sie sich mit diesem wundersamen HTML5-Nebel.

Nebula Cloud HTML5 Showcase: 48 potenzielle Flash Killing Demos

Parallaxe

Zeigen Sie alle 2D-Formen in paralleler Perspektive an.

Parallaxe HTML5 Showcase: 48 potenzielle Flash Killing Demos

Partikelanimation

Eine elegante HTML5-Partikelanimation, die sich zu Ihrer bevorzugten Nachricht formen lässt.

Partikelanimation HTML5 Showcase: 48 potenzielle Flash Killing Demos

Verbreiten

Verlieren Sie sich mit dieser endlosen Animation.

verbreiten HTML5 Showcase: 48 potenzielle Flash Killing Demos

Starfield

Eine sehr coole HTML5-Starfield-Animation, die je nach Mausbewegung Richtung und Geschwindigkeit ändert.

starfield HTML5 Showcase: 48 potenzielle Flash Killing Demos

Video-Zerstörung

Ein Klick, um ein abgespieltes Video zu boomen.

Videovernichtung HTML5 Showcase: 48 potenzielle Flash Killing Demos

Waveform

Beachten Sie, wie sich die Canvas-Welle von HTML5 bewegt, indem Sie Amplitude, Wellenlänge, Breite usw. ändern.

Wellenform HTML5 Showcase: 48 potenzielle Flash Killing Demos

3D-Effekt

Beeindruckt von der Leinwandanimation? Das ist mehr, was das Canvas-Element von HTML5 kann, und es wird als 3D-Effekt bezeichnet. Entwickler können sich auf Canvas-Elemente, DOM und JavaScript verlassen, um einen 3D-Effekt zu erstellen, der später zu einer 3D-Animation oder einem XNUMXD-Spiel entwickelt werden kann.

Canvas3D und Flickr

Erleben Sie mit dem Fotostream von Flickr ein völlig neues 3D-Erlebnis.

canvas3d und flickr HTML5 Showcase: 48 potenzielle Flash Killing Demos

Stoffsimulation

Eine realistische, HTML5-basierte Stoffsimulation.

Stoffsimulation HTML5 Showcase: 48 potenzielle Flash Killing Demos

Sich entwickelndes Monster

Beobachten Sie ein Monster, das sich zu einer komplizierten Kreatur entwickelt. Einer seiner Schöpfer ist HTML5.

sich entwickelndes Monster HTML5 Showcase: 48 potenzielle Flash Killing Demos

Google Geschenkbox

Die riesige Suchmaschine Google wird in einer spielbaren 3D-Ansicht dargestellt.

Google Giftbox HTML5 Showcase: 48 potenzielle Flash Killing Demos

JS-Touch

Eine hochwertige und realistische 3D-Präsentation auf 2D-Leinwand.

js touch HTML5 Showcase: 48 potenzielle Flash Killing Demos

Datenpräsentation

Während das Canvas-Element von HTML5 zum Erstellen von Animationen und 3D-Effekten verwendet werden kann, kann es auch zur Darstellung mathematischer Daten implementiert werden.

gnuplot

Gnuplot, eine Datenplotanwendung in der HTML5-Version.

gnuplot HTML5 Showcase: 48 potenzielle Flash Killing Demos

RGraph

RGraph bietet eine breite Palette an Datenpräsentationen wie Balkendiagramme, Fortschrittsbalken und herkömmliche Radardiagramme.

rgraph HTML5 Showcase: 48 potenzielle Flash Killing Demos

Internetanwendung

Letztendlich kann man mit allen Möglichkeiten, die durch HTML5 und andere Sprachen kombiniert werden, eine interaktive Anwendung oder ein Spiel erstellen, das der Flash-Anwendung nahe kommt.

LeinwandFarbe

Erleben Sie, wie der Bruder von Microsoft Paint in Ihren Webbrowser kommt und sein Vater HTML5 ist.

canvaspaint HTML5 Showcase: 48 potenzielle Flash Killing Demos

LeinwandMol

Eine wissenschaftliche Anwendung, die Ihnen helfen soll, die Struktur bestimmter Erdelemente zu verstehen.

canvasmol HTML5 Showcase: 48 potenzielle Flash Killing Demos

Cartoon-Baumeister

Zeichnen Sie mit diesem minimalen und interaktiven Cartoon-Builder ein interessantes Cartoon-Bild.

HTML5-Showcase für Cartoon-Builder: 48 potenzielle Flash Killing-Demos

Ziehen Sie alles hierher

Ziehen Sie alles, was Sie in der Demo ziehen können, um Details anzuzeigen.

Ziehen Sie etwas hierher HTML5 Showcase: 48 potenzielle Flash Killing Demos

Gartic Skizze

Eine originale HTML5-Anwendung, mit der Sie einige grundlegende Zeichnungen erstellen können, die in verschiedenen Bildformaten wie JPEG oder PNG gespeichert werden können.

Gartic Sketch HTML5 Showcase: 48 potenzielle Flash Killing Demos

PhysikSkizze

Zeichnen Sie, was Sie möchten, und sehen Sie, wie sie mit der simulierten Schwerkraft reagieren.

Physicsketch HTML5 Showcase: 48 potenzielle Flash Killing Demos

Skizzenblock

Eine leistungsstarke HTML5-Zeichenanwendung, mit der Sie Ihr Bild präzise zeichnen und bearbeiten können.

Sketchpad HTML5 Showcase: 48 potenzielle Flash Killing Demos

Smalltalk

Eine Webanwendung, die die geografische Position der von Twitter erfassten wetterbezogenen Nachrichten bestätigt und sie so zu einer leinwandbasierten "sozialen Wetterkarte" formt, die recht trivial (wie vom Autor angegeben), aber interessant ist.

smalltalk HTML5 Showcase: 48 potenzielle Flash Killing Demos

Spiel

3 gelangweilt

Sie würden sich nie langweilen, wenn Sie in der nächsten Sekunde Hunderten von HTML5-Aufzählungszeichen ausweichen könnten.

3bored HTML5 Showcase: 48 potenzielle Flash Killing Demos

Ausbrechen

Rebound den Ball, um alle Steine ​​zu brechen.

Breakout HTML5 Showcase: 48 potenzielle Flash Killing Demos

Leinwandcape

Nicht ganz ein Spiel, aber es zeigt, wie HTML5 verwendet werden kann, um das Browsergame First Person Shooting zu entwickeln.

canvascape HTML5 Showcase: 48 potenzielle Flash Killing Demos

Fang es

Wie vielen Bällen kannst du ausweichen, um dein gewinnendes HTML5-Quadrat zu erhalten?

Fang es HTML5 Showcase: 48 potenzielle Flash Killing Demos

Kettenreaktion

Verkette die Explosion, um das Ziel zu erreichen, werde nicht süchtig.

Kettenreaktion HTML5 Showcase: 48 potenzielle Flash Killing Demos

Würfelaus

Spielen Sie Tetris in 3D von oben nach unten.

cubeout HTML5 Showcase: 48 potenzielle Flash Killing Demos

echaPhysik

Ziehe einen Gegenstand, um den Ball zum Stern zu bewegen. Vergiss die Schwerkraft nicht.

Etchaphysics HTML5 Showcase: 48 potenzielle Flash Killing Demos

Puzzle

Klicken, drehen und löschen Sie Puzzleteile, um dieses HTML5-basierte Puzzle zu lösen.

Puzzle HTML5 Showcase: 48 potenzielle Flash Killing Demos

Slide Puzzle

Slide to Victory, ein weiteres HTML5-Spiel, das entwickelt wurde, um Ihren Gedankensaft zu quetschen.

Dia-Puzzle HTML5 Showcase: 48 potenzielle Flash Killing Demos

Gleiches Spiel

Entfernen Sie eine bestimmte Gruppe, um eine weitere Gruppe in derselben Farbe zu erhalten, und Sie erhalten schließlich einen Sieg.

gleiches Spiel HTML5 Showcase: 48 potenzielle Flash Killing Demos

Tetris

Eines der klassischsten Spiele, das durch HTML5 wieder zum Leben erweckt wurde.

tetris HTML5 Showcase: 48 potenzielle Flash Killing Demos

Torus

Noch ein Tetris-Spiel in Pseudo-3D-Version.

torus HTML5 Showcase: 48 potenzielle Flash Killing Demos


Der Inhalt des Artikels entspricht unseren Grundsätzen von redaktionelle Ethik. Um einen Fehler zu melden, klicken Sie auf hier.

7 Kommentare, hinterlasse deine

Hinterlasse einen Kommentar

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

*

*

  1. Verantwortlich für die Daten: Miguel Ángel Gatón
  2. Zweck der Daten: Kontrolle von SPAM, Kommentarverwaltung.
  3. Legitimation: Ihre Zustimmung
  4. Übermittlung der Daten: Die Daten werden nur durch gesetzliche Verpflichtung an Dritte weitergegeben.
  5. Datenspeicherung: Von Occentus Networks (EU) gehostete Datenbank
  6. Rechte: Sie können Ihre Informationen jederzeit einschränken, wiederherstellen und löschen.

  1.   Lutscher sagte

    Das Tetris geht nicht, ich lege zwei Stücke hinein und stehe, aber der Rest ist sehr cool

  2.   Elisa sagte

    Ich liebe diese Seite ... außer dem ersten Spiel. Ich liebe dich Fran =)
    Tschüss ein Kuss an die Welt toooodooooooo

  3.   Helsisch sagte

    Unglaublich, spektakulär. Ich kann nicht glauben, wie weit die Webentwicklung gekommen ist!

  4.   Joe vega sagte

    Ich weiß nicht, warum diese Ressourcen HTML5 zugeordnet werden. Dies ist reines Javascript. Vor dem Aufkommen von Flash, mit Javascript konnten all diese Dinge getan werden. Es gab eine Studie in Barcelona, ​​die einige Websites erstellt hat, die mir damals den Kopf umgehauen haben. alles in Javascript so viel, dass ich von ihnen gelernt und ein Paar mit springenden Bällen entworfen habe und alles, ich habe sie komplett verloren und bereue es immer noch. Ich erinnere mich nicht an den Namen des Studios, es war so etwas wie you2 oder 2you2, das ungefähr 98 war.

  5.   ASDF sagte

    Joe Vega ... es zeigt, dass Sie keine verdammte Ahnung von HTML5 haben ... lol

  6.   Joe vega sagte

    Sie haben vielleicht keine blutige HTML5-Idee, aber Sie verwechseln den Hahn mit dem Hühnerstall und unterscheiden eine Sprache nicht von einer Umgebung. Ich fordere Sie auf, ein Beispiel wie das hier ohne Verwendung von Javascript nur mit HTML5 zu erstellen, und Sie werden verstehen, was ich in dem von mir gelöschten Beitrag gemeint habe. Außerdem habe ich mir den Quellcode der Beispiele angesehen, und es gibt einige, die leicht durchgeführt werden können, ohne dass sie auf HTML5 gemountet werden müssen.
    Dass HTML5 viele Verbesserungen und Dinge bringt, die viel erleichtern, ist wahr, aber die Lorbeeren der fantastischen Sache, die auf dieser Seite gezeigt wird, sind Javascript.

  7.   Santiago Barchetta sagte

    Ich bin daran interessiert, Präsentationen dieser Art zu machen ... haben Sie ein Tutorial oder eine Seite mit Ressourcen? Danke!!!