ハンズオン講座:
2017年06月28日水曜日「jQueryではじめるJavaScript入門」
2017年06月29日木曜日「TypeScript入門講座」
■Twitter: @FumioNonaka / Facebook Page: CreateJS / Away3D
HTML5 feeling
CSSとCanvasを使ったインタラクションの作例紹介
CSS3の実装が進み、JavaScriptを使わなくても、インタラクティブなアニメーションが表現できるようになった。また、JavaScriptのライブラリでCanvasを用いれば、ダイナミックなモーショングラフィックスがつくれる。小さな作例をいくつか採り上げながら、表現のポイントや組み立て方を解説する。魅力的な動きが、数学的な考え方により、簡単な四則演算で表される例もご紹介しよう。
01 垂直に回転して切り替わる直方体のタブ
サンプル001■CSS3: 3D Cube for tabbed content
02 立体的なナビゲーションバーのアニメーション
-
サンプル002■CSS3: 3D style navigation bar
-
サンプル003■Away3D 15/10/09: Dealing with the mouse interactions for objects and the camera
*テクスチャを読み込むためには、jsdo.itのサイトで開く。
03 マウスポインタの軌跡に弾みがついた曲線を描く
サンプル004■EaselJS 0.8.2: Smooth Line tuned
04 EaselJSでインスタンスをドラッグする勢いで回転を加速する
-
サンプル005■EaselJS 0.8.2: EaselJS でインスタンスをドラッグする勢いで加速して回す
-
図001■intentionallies.co.jp
>> intentionallies.co.jp
05 数学についての参考
- Flashで学んでいた数学「追うのは微分が役に立つ」
- 珍味ベクトル外積3種盛り (17分間の解説映像あり)
作成者: 野中文雄
作成日: 2017年5月13日
Copyright © 2001-2017 Fumio Nonaka. All rights reserved.