タグ「技術 - アニメーション」の記事一覧
MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから。
2012/05/19
JavaScript/CSSを使ってスクロールによるアニメーションを実現「skrollr」
最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。 デモです。スクロールを開始します！ 回転しながら飛んでくる文字！ 下から上がってくる文字！ 横からスライドも。 色が変わりました。それに合わせてテキスト色も変わっ...
2012/05/13
マウスを動かすと影が動く、そんなちょっとしたアニメーション「Real Shadow」
マウスを追従する仕組みは目を引きやすいです。そんな仕組みの一つとしてReal Shadowを紹介します。マウスを動かすと影が動く仕組みです。 多数のオブジェクトが並び、その影が描かれています。ライトはマウスがある場所になります。 マウスを動かせば影もリアルタイムに動きます。 Real Sha...
2012/02/23
ニホンノアニメサイコー「Kanade」
日本のアニメは海外でも人気の高いコンテンツの一つです。そんな日本でのアニメ放送に関する情報をiPadやiPhoneでもすぐに確認できるようにしたのがKanadeです。 まずはデスクトップ、iPad向け。右側にシーズンの一覧が出ています。 シーズンを選ぶとその季節に放映されたアニメが一覧で表示...
2012/01/17
2012/01/14
スクロールで発動するダイナミックなアニメーション「scrollorama」
Webページでインパクトある表現を求めている方にお勧めしたいのがscrolloramaです。 最初の表示です。ここから下にスクロールしていきます。 まず上にあった文字がばらけていきます。 下にある文字が回転しながら収まっていきます。 ダイナミックに展開していきます。 文字が下から迫ってきます...
2011/11/29
Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ「CAKE（Canvas Animation Kit Experiment）」
HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプル...
2011/11/13
要注目！CSSとJavaScriptで作るアニメーション「Animatable」
最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニメーションに対応させたのがAnimatableです。 色々な画像が並んでいます。マウスオーバーでアニメーショ...
2011/03/14
JavaScriptでタイムラインベースのアニメーションを実現する「mashi」
mashiはJavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを実現しようと思うと、技術的に候補にあがるのがアニメーションGIF、Flashそして動画だろう。どれもあまり動的に作り出すものではないので、再利用性やシステムとの親和性は高くない。 画面上の部分...
2010/12/17
Spriteを使ったJavaScript製のアニメーションライブラリ「Sprite.js」
Sprite.jsはJavaScript製のオープンソース・ソフトウェア。JavaScriptを使ってゲームを作る場合、キャラクターの描画には二種類の方法が考えられるだろう。一つは画像を使う方法、もう一つはドット単位やCanvasを使って直接描画する方法だ。 32体の人形が歩き回るデモ ...
2010/03/17
iPhoneでも使える。JavaScriptを使った簡易アニメーション「Spritely」
SpritelyはJavaScript製/jQueryプラグインのオープンソース・ソフトウェア。iPhone + Webの最大の問題点と挙げられるのがFlashを使えないために効果的なアニメーションが利用できないということだ。GIFアニメーションを使う手もあるが、クリックやインタラクティブな動...
2009/11/16
CSSとJavaScriptを組み合わせたアニメーションライブラリ「emile」
emileはCSS/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを行う際、まず思いつくのはFlashを使った手法だろう。だがそこまで複雑なアニメーションでもなく、そもそもFlashを扱うのが苦手な場合はどうしたら良いだろう。そこで使えそうなのがJava...
2008/03/23
プログラミングするアニメーションツール「NodeBox」
2Dのアニメーションや、グラフィックスを描こうと思うと、プログラマの方は尻込みしてしまうだろう。デザインの世界はプログラミングとは全く異なるセンスが要求される世界だ。だからデザインが苦手な人も多い。 だが、そのデザインをプログラミングするとしたらどうだろう。何となくできそうな感じはしないだ...
アンケート