演出力はJSer・コーダー・デザイナーの必修科目!アニメーションの基礎を5種類のパターンで身につけよう! [Japanese Version Only]

アニメーションの表現力を身につけたいけれど、何から始めたらいいか困っている人にオススメ!

動きを実装するのはFlash Developerだけのものではなくなりました。
お手本コードをフォークしてアニメーションの基礎を学びましょう!

課題

基礎的な5つの動きに挑戦してみましょう。
サンプルコードをアレンジ(フォーク)して、「普通に」「ドンッて感じで」「シュッと」「生きている感じ」「意外性を出して」の動きをつけてください。
(アニメーションのリクエストはいつもふわっとしてるものですよね。笑)

ポイント

  • アニメーションはJavaScriptやCSS3などで作成してみましょう。
  • 「普通に」の動きは作成してありますが、あなたなりのアニメーションにも挑戦してみてください。
  • 他の人の回答を見る

アニメーションをつける手段

JavaScript

メリット

  • jQueryやjQuery Easingなどを使うと、比較的簡単にアニメーションを実装することができます。
  • 多くのブラウザに対応させることができます。

デメリット

  • 非力な環境では重く感じることがあります。

参考

CSS3 animation

メリット

  • CSSだけで実装することができます。
  • スマートフォンなどでも比較的軽快に動きます。

デメリット

  • ブラウザごとの実装状況がまちまちで、非対応のブラウザに対するフォールバックも考えなくてはいけません

参考

jsdo.itならすぐに学習が始められます!

お手本コードを元に、ブラウザ上ですぐ書き始めることができるので、面倒な準備は必要ありません。
ぜひぜひ挑戦してみてくださいね!

Comment

Recommendations

Facebook page