サイトトップ

Director Flash 書籍 業務内容 プロフィール

ハンズオン講座:
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 立体的なナビゲーションバーのアニメーション


03 マウスポインタの軌跡に弾みがついた曲線を描く

サンプル004■EaselJS 0.8.2: Smooth Line tuned


04 EaselJSでインスタンスをドラッグする勢いで回転を加速する


05 数学についての参考


作成者: 野中文雄
作成日: 2017年5月13日


Copyright © 2001-2017 Fumio Nonaka.  All rights reserved.