はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

アニメーション

CreateJS でハロウィン的なアニメーションつくってみた

CreateJS でハロウィン的なムービーつくってみた CreateJS でハロウィン的なムービーつくってみた アニメーション 感想 関連 アニメーション デ○モンが11月から劇場版?をやるとかでそれ関係のネタです。 github pages: haloween2015

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS]

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS] png, jpg, svg などでスプライトシートを作っておけば、 SpriteSheetクラスとSpriteクラスでスプライトアニメーション を生成できる。 EaselJS のSpriteSheet, Sprite を使って…

CreateJS で読み込んだ画像をアニメーションさせる

CreateJS で読み込んだ画像をアニメーションさせる CreateJS で読み込んだ画像をアニメーションさせてみたのでメモ、 以下の記事を再現できるか試してみました。 gihyo.jp CreateJS で読み込んだ画像をアニメーションさせる サンプル メモ 画像を読み込む 画…

Canvas のライブラリCreateJS を試してみる

Canvas のライブラリCreateJS を試してみる Canvas を使いやすくするライブラリCreateJS を試してみたのでメモ。 公式サイト: www.createjs.com Canvas のライブラリCreateJS を試してみる CreateJS とは EaselJS チュートリアル PreloadJS チュートリアル …

CSS3 のみでMaterial Designライクなripple effect を試してみた

CSS3 のみでMaterial Designライクなripple effect を試してみた 先日、Material Design Lite がリリースされました。 Material Design の中にripple effect という、ボタンをクリックすると波紋が拡がる効果があります。 こちら http://www.getmdl.io/compo…

CSS3 で球(sphere) と転がっているようなアニメーション

CSS3 で球(sphere) と転がっているようなアニメーション CSS3のみ で球(3次元)を作ってみました。 CSS3 で球(sphere) と転がっているようなアニメーション 球 + アニメーション 参考リンク 球 + アニメーション codepen.io

CSS3 のみでキューブ(立方体)を作る!

CSS3 のみでキューブ(立方体)を作る! CSS3 のみでキューブを作ってみました。 CSS3 のみでキューブ(立方体)を作る! キューブ アニメーション付きキューブ 参考リンク キューブ 6面をつくって、それぞれをtranslate で上、下、左、右、手前、奥に配置てし…

動きのあるWebサイト 12選

動きのあるWebサイト 12選 カルーセル、パララックス、動画などの動きのあるサイトをまとめておきます。 動きのあるWebサイト 12選 カルーセル系 au docomo softbank パララックス系 探検!京都大学 キリン一番搾り IPSA 動画系 CALL of DUTY Brindisa Tapas…

CSS3 で\(^o^)/オワタ AA のアニメーション

CSS3 で\(^o^)/オワタ AA のアニメーション \(^o^)/オワタ AA をCSS3 でアニメーションさせてみました。 2コマのイメージで作ったので、ほとんどGIFと変わりません。 CSS3 で\(^o^)/オワタ AA のアニメーション コード ちょっとした解説 手のアニメーション 口…

CSS3 で作るパックマン + アニメーション

CSS3 で作るパックマン + アニメーション CSS3 のみでパックマンとアニメーション(口の動き+並行移動)ができたのでメモ。 CSS3 で作るパックマン + アニメーション コード パックマンの形の作り方 口の動き 並行移動 コード こいつの良いところは、 :before…

CSS3 のみで円周上を周回運動(circular motion)するアニメーション

CSS3 のみで円周上を周回運動(circular motion)するアニメーション 円の大きさを決めたら、コンテンツの大きさが半径で決まり、 円周上の位置などが% 指定で相対的に決まるようなものを作ってみました。 CSS3 のみで円周上を周回運動(circular motion)するア…

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現![メモ]

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現![メモ] ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現![メモ] 引用元 押し潰しと伸縮(Squash and Stretch) 予備動作(Anticipation) 演出(Staging) …