Project Description

グミベトナムでデモとして制作したHTML5での開発サンプルをまとめました。

HTML5の開発サンプルで、Canvas、JavaScriptやCSS3を活用し、既存のWeb(HTML4.0)とは違う可能性を探るスタッフが研究しているDEMOページです。
HTML5コーディングでは、プラグインなしでもCSSやJavaScriptを中心にスクリプトを使いシンプル運用できHTML取り扱いは格段にシンプルにできるようになっております。
今後のWebコンテンツの可能性を探るための開発サンプルを御覧ください。HTML5対応ブラウザのChrome, Safari, FireFox最新版を推奨します。

HTML5 開発サンプルリスト
  1. CSS3アニメーション
  2. JavaScriptの3D効果を作成する
    • 3Dレンダリング
    • 3Dスライダー(Slicebox)
  3. データを視覚化する『D3.js』ライブラリ(Data Driven Document)
    • ピンポン移動シミュレーション
    • TYPHOONシミュレーション

1. CSS3アニメーション

Demo CSS3 Animation
HTML5コーディングにおいてCSS3ツールを活用することでコーディングをシンプルかつ整理して制作することができますので制作期間の短縮が図れます。
CSS3アニメーションDEMO概要:CSS3を使用して6つの異なる個々の特性を持つ円形の広場からスイッチボックスをオンの効果を作成します。 また、マウスオワーするとランダムな行動が起こささせる事があります。
今回のCSS3アニメーションサンプルはJavaScriptを極力使用せずに、CSS3で興味深いアニメーションを作成する実験です。 CSS3を使用するメリットとしてコンテンツのサイズを削減することができ、シンプルな効果を作成するのに役立ちます。
※対応ブラウザーは、Internet Explorer9・10、Chrome、Firefox、Safari
View Demo

2. JavaScriptで3D効果を作成

立体的な3D効果の表現は、いろいろなツールが存在しますが、基本的には高価なプロのツールが購入し、そしてそのツールを使いこなす腕がなくては実現が難しいものでした。 今回のJavaScriptでの3D効果のDEMOは、JavaScript表記で3Dを表現する為に、短期間、低コストで3D表現を提供できます。 3Dライブラリでそれは多くの異なる目的のための3D効果を表現できるスクリプトを実装できます。
※対応ブラウザーは、Internet Explorer9・10、Chrome、Firefox、Safari

DEMO1 – 3D cube

Demo 3D cube
このデモでは、平面の画像をベースに3Dレンダリング技術を利用することによって、それが立方体のイメージを作成します。
マウスクリックで回転開始と停止をご利用できます。
View Demo

DEMO2 – 3D Slicebox

Demo 3D Slicebox
このデモはJavaScriptで書かれた3Dスライダープラグインです。このプラグでは通常の2Dスライディングスタイルの使用よりも、3D効果でスライド移動を作成するためで使われます。
View Demo

3. データを視覚化する『D3.js』ライブラリ

d3.jsとは、Webブラウザー上でデータビジュアライゼーション(可視化)を実現するための人気のJavaScriptライブラリです。 Web上でシミュレートしたり、統計データ表示に使用されます。使用データは、XML、JSON、CSV、ARRAYの形態で保たれます。d3.jsは、強力なデータ分析ツールであり、任意のデータでほぼすべてのイメージを描くことができます。特に図を描くことに適します。

DEMO1 ピンポン移動シミュレーション

Demo pingpong
D3ライブラリで、バブル内のテキストを入れて、JSONファイルを使用してランダムな動きをするために管理します。このデモでは、異なる色の3つのグループ(と内容)の移動が見せるデモを作成します。
View Demo

DEMO2 Typhoonシミュレーション

Demo typhoon
D3ライブラリーの配列オブジェクトを使用して、円形のデータが繰り返し定義され、復元されます。データは、いくつかのサークルを作成する半径の円と正方形の幅を含めていること、異なる速度で回転を表現します。
このデモでは、6つの異なる回転が作成され、仮想台風効果を実現します。 円形の定義の内容はオブジェクト配列内に格納されています。半径の円と正方形の幅が異なる回円の転速度に反映して表現します。
View Demo
Contact Us

お問合せはこちらから

ラボ型開発・オフショア開発・HTML5コーディング・スマホアプリに対する質問などお気軽にご連絡ください。

Contact Us