48の残忍なHTML5 / CSS3デモ

キャンバス漫画アニメーションHTML5ショーケース:48の潜在的なフラッシュキリングデモ

私はあなたが最近記事のコメントで尋ねた質問に答えるためにこの投稿を取ります:

HTML5で完全にデザインを始めるのに良い時期はいつですか?

まあ、正直なところ、それはあなたがターゲットにしているターゲットに依存します。 訪問者がInternetExplorer(例:Macソフトウェアページ)を使用する予定がない場合は、今すぐHTML5から始めてください。ただし、IEを使用しているユーザーがWebサイトを表示する必要がある場合は、しばらくお待ちください...

エントリでは、ジャンプのかなり後に、驚くべき、見る価値のあるHTML48の5のデモがあります。 素晴らしいことはほとんどありません。

ソース| ホンキアット

audioburstアニメーション

HTML5のキャンバスとオーディオタグで作成された快適で素晴らしいアニメーション。

オーディオバーストアニメーションHTML5ショーケース:48の潜在的なフラッシュキリングデモ

ボールプール

前回のGoogleI / Oイベントで紹介されたこのデモでは、HTML5がいかに動的であるかを示しています。

ボールプールHTML5ショーケース:48の潜在的なフラッシュキリングデモ

ブロブサラダ

あなたを喜ばせるHTML5で生成された生き物。

blob sallad HTML5ショーケース:48の潜在的なフラッシュキリングデモ

ボモモ

Bomomoを使用すると、HTML5でシミュレートされたさまざまな原子の動きを観察できます。

bomomo HTML5ショーケース:48の潜在的なフラッシュキリングデモ

ブラウザボール

この「クロスブラウザ」HTML5ボールに驚かされます。

ブラウザボールHTML5ショーケース:48の潜在的なフラッシュキリングデモ

バブル

さまざまな色の無限の浮遊泡を作成して楽しんでください。

バブルHTML5ショーケース:48の潜在的なフラッシュキリングデモ

キャンバス漫画アニメーション

HTML5のcanvas要素で何ができるかを理解するのに役立つシンプルで面白いHTML5漫画。

キャンバス漫画アニメーションHTML5ショーケース:48の潜在的なフラッシュキリングデモ

coolclock

HTML5とJavaScriptによって構築されたカスタマイズ可能なアナログ時計。

coolclock HTML5ショーケース:48の潜在的なフラッシュキリングデモ

FlickrPS3スライドショー

Flickrの写真をPS3スタイルのスライドショーでWebブラウザーに表示します。

flickr ps3スライドショーHTML5ショーケース:48の潜在的なフラッシュキリングデモ

インタラクティブポラロイド

マルチタッチインターフェイスと非常によく似たインタラクティブなデモ。

インタラクティブポラロイドHTML5ショーケース:48の潜在的なフラッシュキリングデモ

JS花火

HTML5とJavascriptを利用して、お好みの重力と速度で花火の瞬間をお楽しみください。

js花火HTML5ショーケース:48の潜在的なフラッシュキリングデモ

万華鏡

非常に美しく未来的なHTML5万華鏡。

kaleidoscope HTML5ショーケース:48の潜在的なフラッシュキリングデモ

液体粒子

マウスの動きに基づいて反応する高感度のパーティクルアニメーション。

液体粒子HTML5ショーケース:48の潜在的なフラッシュキリングデモ

メスメライザー

近くの要素がマウスの動きにどのように反応するかを示す、もう5つの繊細で優れたHTMLXNUMXデモ。

mesmerizer HTML5ショーケース:48の潜在的なフラッシュキリングデモ

星雲雲

この素晴らしいHTML5星雲で迷子になります。

星雲雲HTML5ショーケース:48の潜在的なフラッシュキリングデモ

視差

すべての2D形状を平行透視法で表示します。

視差HTML5ショーケース:48の潜在的なフラッシュキリングデモ

パーティクルアニメーション

好みのメッセージを形成できるエレガントなHTML5パーティクルアニメーション。

パーティクルアニメーションHTML5ショーケース:48の潜在的なフラッシュキリングデモ

広がる

この無限の広がりのアニメーションで迷子になります。

スプレッドHTML5ショーケース:48の潜在的なフラッシュキリングデモ

スターフィールド

マウスの動きに基づいて方向と速度を変更する、非常にクールなHTML5スターフィールドアニメーション。

スターフィールドHTML5ショーケース:48の潜在的なフラッシュキリングデモ

ビデオ破壊

ワンクリックで再生中のビデオをブームします。

ビデオ破壊HTML5ショーケース:48の潜在的なフラッシュキリングデモ

Waveform

HTML5のキャンバス波が、その振幅、波長、幅などを変更することによってどのように動くかに注目してください。

波形HTML5ショーケース:48の潜在的なフラッシュキリングデモ

3D効果

キャンバスアニメーションに感銘を受けましたか? これは、HTML5のcanvas要素でできることであり、3D効果と呼ばれます。 開発者は、canvas要素、DOM、JavaScriptを使用して3D効果を作成できます。これは、後で3Dアニメーションやゲームに開発できます。

Canvas3DとFlickr

Flickrのフォトストリームでまったく新しい3D体験をしてください。

canvas3dとflickrHTML5ショーケース:48の潜在的なフラッシュキリングデモ

布のシミュレーション

リアルなHTML5ベースの布のシミュレーション。

布シミュレーションHTML5ショーケース:48の潜在的なフラッシュキリングデモ

進化するモンスター

複雑な生き物に進化するモンスターを観察してください。その作成者の5人はHTMLXNUMXです。

進化するモンスターHTML5ショーケース:48の潜在的なフラッシュキリングデモ

Googleギフトボックス

巨大な検索エンジンGoogleは、3Dの再生可能なビューで表示されます。

グーグルギフトボックスHTML5ショーケース:48の潜在的なフラッシュキリングデモ

JSタッチ

高品質でリアルな「3Don2DCanvas」ショーケース。

js touch HTML5ショーケース:48の潜在的なフラッシュキリングデモ

データプレゼンテーション

HTML5のcanvas要素を使用してアニメーションや3D効果を作成できますが、数学データを表示するために実装することもできます。

gnuplot

HTML5バージョンのデータプロットアプリケーションであるGnuplot。

gnuplot HTML5ショーケース:48の潜在的なフラッシュキリングデモ

Rグラフ

RGraphは、棒グラフ、プログレスバー、従来のレーダーチャートなどの幅広いデータ表示を提供します。

rgraph HTML5ショーケース:48の潜在的なフラッシュキリングデモ

Webアプリケーション

最終的には、HTML5と他の言語を組み合わせたすべての可能性を使用して、Flashアプリケーションに近いインタラクティブなアプリケーションまたはゲームを作成できます。

キャンバスペイント

Microsoftペイントの兄弟があなたのウェブブラウザにやってくるのを目撃してください。彼の父親はHTML5です。

canvaspaint HTML5ショーケース:48の潜在的なフラッシュキリングデモ

キャンバスモル

特定の地球要素の構造を理解するのに役立つように構築された科学的アプリケーション。

canvasmol HTML5ショーケース:48の潜在的なフラッシュキリングデモ

漫画ビルダー

この最小限のインタラクティブな漫画ビルダーで面白い漫画の画像を描きます。

漫画ビルダーHTML5ショーケース:48の潜在的なフラッシュキリングデモ

ここに何かをドラッグ

デモでドラッグできるものをすべてドラッグして、詳細を表示します。

ここに何かをドラッグしますHTML5ショーケース:48の潜在的なフラッシュキリングデモ

ガーティックスケッチ

jpegやpngなどのさまざまな画像形式で保存できるいくつかの基本的な図面を作成できるオリジナルのHTML5アプリケーション。

gartic Sketch HTML5ショーケース:48の潜在的なフラッシュキリングデモ

物理スケッチ

好きなものを描いて、シミュレートされた重力とどのように反応するかを確認してください。

physicsketch HTML5ショーケース:48の潜在的なフラッシュキリングデモ

スケッチパッド

正確な方法で画像を描画および編集できる強力なHTML5描画アプリケーション。

スケッチパッドHTML5ショーケース:48の潜在的なフラッシュキリングデモ

スモールトーク

Twitterから取得した天気関連メッセージの地理的位置を確認するWebアプリケーション。これにより、それらをキャンバスベースの「社会天気」マップに形成します。これは非常に簡単ですが(作成者が述べたように)興味深いものです。

smalltalk HTML5ショーケース:48の潜在的なフラッシュキリングデモ

ゲーム

3退屈

次の5秒間に何百ものHTMLXNUMXの弾丸を回避し続けることができれば、退屈することはありません。

3bored HTML5ショーケース:48の潜在的なフラッシュキリングデモ

起こる

ボールをリバウンドしてすべてのレンガを壊します。

ブレイクアウトHTML5ショーケース:48の潜在的なフラッシュキリングデモ

キャンバスケープ

完全なゲームではありませんが、HTML5を使用してファーストパーソンシューティングブラウザゲームを開発する方法を示しています。

canvascape HTML5ショーケース:48の潜在的なフラッシュキリングデモ

それを捕まえて

勝ったHTML5スクエアを手に入れるために、いくつのボールをかわすことができますか?

HTML5ショーケースをキャッチ:48の潜在的なフラッシュキリングデモ

連鎖反応

目標を達成するために爆発を連鎖させ、中毒にならないでください。

連鎖反応HTML5ショーケース:48の潜在的なフラッシュキリングデモ

キューブアウト

テトリスを3Dのトップダウンビューで再生します。

cubeout HTML5ショーケース:48の潜在的なフラッシュキリングデモ

エッチアフィジックス

アイテムを描いてボールを星に移動します。重力を忘れないでください。

etchaphysics HTML5ショーケース:48の潜在的なフラッシュキリングデモ

ジグソーパズル

このHTML5ベースのジグソーパズルを解くには、パズルのピースをクリック、回転、ドロップします。

ジグソーパズルHTML5ショーケース:48の潜在的なフラッシュキリングデモ

スライドパズル

スライドして勝利を収めましょう。これは、マインドジュースを絞るために構築されたもう5つのHTMLXNUMXゲームです。

スライドパズルHTML5ショーケース:48の潜在的なフラッシュキリングデモ

同じゲーム

特定のグループを削除して、同じ色でペアになっている別のグループを取得すると、最終的に勝利が与えられます。

同じゲームHTML5ショーケース:48の潜在的なフラッシュキリングデモ

テトリス

HTML5によって復活した最も古典的なゲームのXNUMXつ。

テトリスHTML5ショーケース:48の潜在的なフラッシュキリングデモ

トーラス

疑似3Dバージョンのさらに別のテトリスゲーム。

トーラスHTML5ショーケース:48の潜在的なフラッシュキリングデモ


記事の内容は、次の原則に準拠しています。 編集倫理。 エラーを報告するには、 ここで.

7コメント、あなたのコメントを残してください

コメントを残す

あなたのメールアドレスが公開されることはありません。

*

*

  1. データの責任者:MiguelÁngelGatón
  2. データの目的:SPAMの制御、コメント管理。
  3. 正当化:あなたの同意
  4. データの伝達:法的義務がある場合を除き、データが第三者に伝達されることはありません。
  5. データストレージ:Occentus Networks(EU)がホストするデータベース
  6. 権利:いつでも情報を制限、回復、削除できます。

  1.   チュパティーナ

    テトリスは行きません、私はXNUMXつのピースを置いてとどまりました、しかし残りは非常にクールなチャベールです

  2.   エリサ

    私はこのページが大好きです...最初のゲームを除いて。 私はあなたを愛していますフラン=)
    さようなら世界へのキスtoooodooooooo

  3.   ヘルシック

    信じられないほど、壮観です。 Web開発がどこまで進んだか信じられません!

  4.   ジョーベガ

    これらのリソースがHTML5に起因する理由はわかりません。これは純粋なJavascriptです。Flashが登場する前は、Javascriptを使用してこれらすべてのことを実行できました。バルセロナで調査が行われ、当時は頭を悩ませていました。すべてjavascriptで書かれているので、私はそれらから学び、バウンドするボールを使ってカップルをデザインしました。私はそれらを完全に失い、それでも後悔しています。 スタジオの名前は覚えていませんが、2年頃のyou2や2you98のようなものでした。

  5.   自衛隊

    ジョーベガ……それはあなたがHTML5のクソの考えを持っていないことを示しています….lol

  6.   ジョーベガ

    血まみれのhtml5のアイデアはないかもしれませんが、それは本当ですが、オンドリと鶏小屋を混同し、言語と環境を区別しません。 Javascriptを使用せず、html5のみを使用して、ここにあるような例を作成するようにお願いします。削除した投稿で私が何を意味していたかが理解できます。 さらに、私は例のソースコードを見てきましたが、html5にマウントしなくても簡単に実行できるものがいくつかあります。
    そのhtml5は多くの改善をもたらし、多くのことを容易にすることが真実ですが、このページに示されている素晴らしいものの栄光はJavascriptです。

  7.   サンティアゴバルケッタ

    このタイプのプレゼンテーションを作成することに興味があります...リソースを含むチュートリアルまたはページはありますか? ありがとうございました!!!