MaxMouse×HTML5!

Parallax demo

Parallax demo

概要

パララックス(視差)効果を取り入れた演出サンプルです。
スクロールに応じて、要素に対しそれぞれ別のアニメーション処理を施すことによって奥行きがある視覚効果を生み出します。

動作ブラウザ
  • PC:Mozilla® Firefox®15以上、Chrome™22以上
  •       Windows® Internet Explorer®9以上

操作説明

  1. (1) ブラウザ右のスクロールバーを上下に動かします。
  2. (2) 各構成要素がそれぞれ別のアニメーションを行います。

Parallax demo 2

Parallax demo

概要

パララックス(視差)効果を取り入れた演出サンプルです。
スクロールに応じて、要素に対しそれぞれ別のアニメーション処理を施すことによって奥行きがある視覚効果を生み出します。

動作ブラウザ
  • PC:Chrome™23以上
  •       Windows® Internet Explorer®9以上

操作説明

  1. (1) ブラウザ右のスクロールバーを上下に動かします。
  2. (2) 各構成要素がそれぞれ別のアニメーションを行います。

Ball Tag(ボール鬼ごっこ)

Ball Tag(ボール鬼ごっこ)

概要

HTML5の"WebSocket"を利用しブラウザ上でリアルタイムに双方向通信を行うデモコンテンツです。
PCまたはiPadのブラウザ上のキャラクタを、iPhoneの加速度センサーを利用して操作します。

※2人プレイ専用です。2人揃ってお楽しみください。

動作ブラウザ
  • PC:Chrome™19以上
  • タブレット:iPad(iOS5.0以上)
  • スマートフォン:iPhone(iOS5.0以上)※コントローラーとして使用

操作説明

  1. (1) PCまたはiPadでゲーム画面を表示します。
  2. (2) ゲーム画面からお好きなRoomを選んでください。
  3. (3) Roomに入ったら、お手持ちのiPhoneでQRコード(またはURL)からサイトへアクセスしてください。
    ※あなたのiPhoneがコントローラーになります!
  4. (4) 2人揃ったら準備完了!制限時間30秒の鬼ごっこがはじまります!
Tips
  • ・コントローラーの画面をタップするとスピードアップ!!
  • ・コントローラーの画面を長押しするとステージマジック!!
    画面の背景が変化します。

ペイントツール

Paint

概要

HTML5のcanvasを使用したペイントツールのデモです。
「鉛筆」「ペン」「消しゴム」「矩形」「円」の描画機能を実装しました。
Paintで描いた絵は画像として保存することができます。

動作ブラウザ
  • PC:Mozilla® Firefox®13以上、Chrome™19以上
  • タブレット:iPad (iOS 5.0以上)

操作説明

  1. (1) 鉛筆やペンを使ってキャンバス上に線を描くことができます。
  2. (2) 消しゴムを使ってキャンバス上の絵を消すことができます。
  3. (3) 保存するで、キャンバス上に描いた絵を画像に変換します。

※ブラウザの機能を使用して画像を保存してください。

スライドパズル

スライドパズル

概要

1枚の画像を分割してスライドパズルを生成するデモです。
HTML5で新たに追加された要素"canvas"を利用することで、元になる画像が1枚あればどんな画像でもスライドパズルにすることができます。

動作ブラウザ
  • PC:Mozilla® Firefox®13以上、Chrome™19以上
  • タブレット:iPad (iOS 5.0以上)

操作説明

  1. (1) スライドパズルを生成する画像を選択します。
  2. (2) スライドパズルの分割数を選択します。
  3. (3) 生成されたパズルの空いたマスをうまく利用してパズルを完成させてください。

Energy Calendar

Energy Calendar

概要

マックスマウスのオリジナルスマートフォンアプリ「Energy Calendar」をHTML5、CSS3およびJavaScriptを用いて、WEBアプリ化しました。 スマートフォンアプリ版と同等の操作を実装しています。

※スマートフォンアプリ「Energy Calendar」は以下のリンクからダウンロードできます。

動作ブラウザ
  • PC:Chrome™19以上
  • スマートフォン:iPhone4 以上(iOS 5.0以上)

操作説明

  1. (1) +,-のボタンで日付を指定し、日付変更ボタンで指定の日付を表示します。
  2. (2) 誕生日ボタンで、その日に生まれた著名人のリストを表示します。
  3. (3) 出来事ボタンで、その日に起こった過去の出来事を表示します。
  4. (4) 記念日ボタンで、その日の各種記念日の情報を表示します。

SVG demo

SVG demo

概要

ローカルマシン上の画像ファイルを読み込み、画像上で指定したパスの通りに"☆"を動かすサンプルです。
画像ファイルの読込みはHTML5の"File API"を、☆のアニメーションはSVGアニメーションを利用しています。
SVGは点の座標や線の属性などで図形を表現する形式で、HTML5ではHTMLソース内でSVGを記述できるようになりました。

動作ブラウザ
  • PC:Mozilla® Firefox®13以上、Chrome™19以上

操作説明

  1. (1) ローカルマシン上の画像ファイルを選択すると、画像が表示されます。
  2. (2) 画像上の任意の点をクリックすると、点がプロットされ☆のパスが設定されます。
  3. (3) ☆が画像の上をパスに沿って動きます。