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

情報・Web系技術・Englishの勉強メモ・備忘録です。

アニメーション

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

CreateJS でハロウィン的なムービーつくってみた 目次 アニメーション 関連リンク アニメーション デ○モンが11月から劇場版?をやるとかでそれ関係のネタです。 codepen.io Github hosting: haloween2015 Github:github.com 感想 今回は、InkscapeでSVGのス…

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

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

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

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

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

Canvas のライブラリCreateJS を試してみる Canvas を使いやすくするライブラリCreateJS を試してみたのでメモ。 公式サイト: www.createjs.com 目次 CreateJS とは EaselJS PreloadJS TweenJS SoundJS 参考リンク 関連リンク CreateJS とは CreateJS | A s…

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次元)を作ってみました。 目次 球 + アニメーション 参考リンク 球 + アニメーション codepen.io

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

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

動きのあるWebサイト 12選

動きのあるWebサイト 12選 カルーセル、パララックス、動画などの動きのあるサイトをまとめておきます。 目次 カルーセル系 パララックス系 動画系 参考リンク

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

CSS3 で\(^o^)/オワタ AA のアニメーション \(^o^)/オワタ AA をCSS3 でアニメーションさせてみました。 2コマのイメージで作ったので、ほとんどGIFと変わりません。 目次 コード 参考リンク コード codepen.io 以下ちょっとした解説。

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

CSS3 で作るパックマン + アニメーション CSS3 のみでパックマンとアニメーション(口の動き+並行移動)ができたのでメモ。 目次 コード コード こいつの良いところは、 :before,:after を駆使したおかげで div タグ 1つで済んでいます。 codepen.io

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

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

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

ディズニー社に学ぶ!HTML/CSSで12個のアニメーション基本原則を完全再現![メモ] 目次 引用元 押し潰しと伸縮(Squash and Stretch) 予備動作(Anticipation) 演出(Staging) 逐次描きと原画による設計(Straight-Ahead Action and Pose-to-Pose) 継続…