ディズニーのアニメの動きがまるで生きているように感じる秘密がわかる「キャラクターに命を吹き込む12の法則」
ウォルト・ディズニー・カンパニーでも伝説的と言われる9人のアニメーター「ナイン・オールドメン」のうち2人がフランク・トーマスとオリー・ジョンストン。キャラクターの感情表現を頂点まで極めたとされる2人が生み出した「キャラクターに命を吹き込む12の法則」が立方体などを使ったムービーとGIFアニメーションで公開されています。 THE ILLUSION OF LIFE http://the12principles.tumblr.com/ ディズニーアニメに出てくるキャラクターの動き12原則は以下のムービーからでも確認できます。 The illusion of life on Vimeo ◆01：SQUASH＆STRETCH(引き延ばしてペチャンコにする) これはキャラクターが動いている時に重さと質量を感じさせるようにする効果。 ◆02：ANTICIPATION(予備的な行為) キャラクターがメイン
SVG初心者に！SVGとCSSでボーダーにちょっとかっこいいアニメーションをつけるデモ
SVGをちょっと始めてみたいな、という人にもちょうどよさそうなテキストの周りに表示するボーダーをアニメーションで表示するデモを紹介します。 SVG Border Animation コードは簡単、コピペで利用できます。 HTML <div class="svg-wrapper"> <svg height="60" width="320" xmlns="http://www.w3.org/2000/svg"> <rect class="shape" height="60" width="320" /> <div class="text">coliss</div> </svg> </div> CSS html, body { background: rgb(20,20,20); text-align: center; height: 100%; overflow: hidden; } .svg
[CSS]重なった複数のパネルを扇状にアニメーションで優雅に開くスタイルシートのテクニック
レッド・イエロー・ブルーの三枚のパネルが重なっており、それをホバーするとそのパネルを扇状に開くスタイルシートのデモを紹介します。 アクションの度に、ぷるっと反動するのが細かい！ Calendar and Clock 実装はけっこう複雑ですが、このインタラクションはかっこいいですね。 日付や時刻の取得、不透明度の変更にJavaScriptを使用していますが、ホバーのアニメーションはスタイルシートで実装されています。 HTML 3つのパネルはdiv要素で、1枚目はノーマル時のカレンダーとホバー時の年と分と日、2枚目はホバー時の時と曜日、3枚目はホバー時の秒と月が要素として配置されています。 <div class="signboard outer"> <div class="signboard front inner anim04c"> <li class="year anim04c"> <sp
CSS3アニメーションを使ったかっこいいページを簡単につくりたい！そんな人に -CSS3 Animation Cheat Sheet
Appleのプロダクトページのように、スクロールをトリガーにCSS3アニメーションが展開するようなページを簡単に実装できるCSS3 Animation Cheat Sheetを紹介します。 「Cheat Sheet」という名称が紛らわしいですが、各種CSS3アニメーションをセットにしたスタイルシートで、ページに外部スタイルシートを加え、classをちょこちょこつけるだけで、簡単にCSS3アニメーションをページに実装できます。 CSS3 Animation Cheat Sheet CSS3 Animation Cheat Sheetのデモ CSS3 Animation Cheat Sheetの使い方 CSS3 Animation Cheat Sheetのデモ デモは2種類あります。 CSS3のキーフレームアニメーションを使用しているため、モダンブラウザでご覧ください、IEは10で。 まずは、
無限ループのGIFアニメをウェブカメラの映像で簡単に作れる「face to gif」
by GivernyDeykin 毎秒10フレームで320×240の無限ループGIFアニメーションを作成してくれるサービスが「face to gif」です。通常GIFアニメの作成には専用のソフトやいくつかの作業が必要になりますが、face to gifはウェブカメラを使って映像を撮影するだけなので、誰でも簡単に作ることが可能になっています。 face to gif http://hdragomir.github.io/facetogif/ トップページはこんな感じ。画面上部には大きな空白があります。 GIFアニメを作成するには、まず「put your face here」をクリック。 すると「カメラをhdragomir.github.ioと共有しますか？」と聞かれるので、「選択したデバイスを共有」を押します。 カメラが起動し、現在カメラが捉えている映像がブラウザ上に映りました。この段階だと
脱Flash！素人でも簡単にHTML5アニメが作成できるMacアプリ「Hype」を使ってみた。なにこれ超楽しい！
Web制作に携わっていると頭を悩ませる項目の一つが「Flash」への対応。 動きのあるコンテンツを作成するにはやはりまだまだFlashが便利なわけですが、iPhoneをはじめとするiOSでは再生できない（一部再生できるブラウザアプリはありますが）ので、困った困ったなのです。 そこで次代を担う（であろう）コンテンツがHTML5を使用したムービー。 先日も、「Form Follows Function」と言うHTML5で作られた、動きのあるコンテンツを紹介したWebページをご紹介したばかりですが、ここまで複雑なものは出来なくとも、私のような初心者でも超簡単にHTML5アニメが作れると噂のMacアプリ、HypeをDLして使ってみました。 タイムラインを使って簡単にHTML5アニメを作れる！ 起動。 Welcome to UNDERGROUND… 「Watch Getting Started Vi
アニメーターってどうやって絵で動いてるように見せてんの？ : 【移転しました】旧ロブ速 (ロブ速)
アニメーターってどうやって絵で動いてるように見せてんの？ カテゴリ : コピー漫画・アニメ 1：以下、名無しにかわりましてVIPがお送りします：2012/03/11(日) 09:23:59.78 ID:76H6Mo6M0 棒人間ですら動かせないんだけど・・・ 2：以下、名無しにかわりましてVIPがお送りします：2012/03/11(日) 09:24:20.35 ID:ZyGD1Q6g0 重労働という名の1000枚 3：以下、名無しにかわりましてVIPがお送りします：2012/03/11(日) 09:29:44.06 ID:76H6Mo6M0 枚数じゃなくてタイムシートっての？ 動かすタイミングとかが全く謎なんだけど 7：以下、名無しにかわりましてVIPがお送りします：2012/03/11(日) 09:33:40.88 ID:FNPdMOhw0 >>3 普通に映画やドラマをスロー再生すれば分
如月草紙（如月ツヴァヰの絵日記） : アニメーションするPNG（APNG）を作る
アニメーションするPNG（APNG）を作る October 14, 2010 03:50 無題 あまり普及していませんが、PNGファイルをGIFアニメーションみたいにアニメさせることができるという。 しかも、GIFより色調豊かで圧縮率高いという。 ただし、FirefoxかOperaで開かないとアニメしないという。 そんなわけで、これらの特徴を持つ「アニメーションPNG（APNG）」に興味を持ちました。 そもそもの発端はpixivにアニメーションPNGがうｐされていたこと。 見た瞬間「こ、こいつ……動くぞッ！？」って思いましたｗ で、↓がアニメーションPNG。 PNGのくせにぬるぬる動くよ！！（Firefox、Opera限定だけど） そして、このアニメーションPNG作成時に用意するもの。 ①アニメーションさせたいPNGファイル ②CSVファイル ③APNGfromCSV
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【保存版】CSS3アニメーションを簡単に利用できるライブラリのまとめ