ITエンジニア/デザイナ向けにオープンソースを毎日紹介

技術 - アニメーションの記事一覧

プレミアムユーザー限定記事

MOONGIFTプレミアムは、月額500円の有料サービスです。詳細はこちらから

もっと見る

List

  • 2012/12/10

CSS3アニメーションをWebブラウザ上で作成&実行「Stylie」

StylieはCSS3のキーフレームベースのアニメーションをグラフィカルに設定できるソフトウェアです。CSSでアニメーションを実行できるのは知られていますが、その実装となるとかなり面倒な雰囲気があります。しかしStylieを使えばグラフィカルに簡単に設定が可能です。デフォルトの表示です。左から右へボールが流れていきます...

List

  • 2012/10/29

JavaScriptとCSS Spriteを組み合わせてアニメーション「MovieCrop.js」

MovieCrop.jsはCSS Spriteを使ったアニメーションライブラリです。Sprite画像を使うとマウスオーバーと連携させてボタンの押し下げによる配色変更を行ったりできます。それと似たような仕組みを使ってアニメーションを実現してしまうのがMovieCrop.jsです。例。単純にくるくる回転し続けます。再生、停...

43371?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f10%2fscreenshot-2012-10-02-12.10.11_thumb

  • 2012/10/12

PNGを結合させてアニメーションを実現「Animation Encoder」

Animation EncoderはPNG画像を結合させてアニメーションPNGを実現させてしまうソフトウェアです。何らかの説明動画を表示するのにあたってIE6からiPadまで表示でき、かつ減色したりしないで表示するにはどうしたら良いだろうか。Animation Encoderが選んだのはPNGを結合して表示するという無...

List

  • 2012/09/23

品質高いJavaScriptアニメーションライブラリ「BonsaiJS」

BonsaiJSはFlashアニメーション並みの動作が可能なJavaScriptライブラリです。JavaScriptによるアニメーションライブラリが増えています。BonsaiJSもその一つです。多彩なアニメーション処理が可能になっていますのでぜひご覧ください。トップページです。ここもアニメーションされています。マウスを...

42698?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f09%2fscreenshot-2012-09-10-10.55.40_thumb

  • 2012/09/19

JavaScriptでインパクトあるアニメーションを実現「jsAnim」

jsAnimはJavaScript製のアニメーションライブラリです。Webページ上にインパクトあるアニメーションを実現しようと思ったら、これまではFlashを使うのが一般的でした。しかし今後はJavaScriptで十分かも知れません。そんな未来を感じさせるのがjsAnimです。サンプルです。キャラクターが左右に動きます...

40888?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2f3dsearch3_thumb3

  • 2012/07/26

作ろう。SWF出力にも対応したアニメーション作成ソフトウェア「K-Sketch」

K-Sketchはアニメーションを作成するソフトウェアです。Windowsで動作します。アニメーションを作るというのはとても大変な作業です。一コマ一コマ描いて、それを連続で流していきます。手軽にアニメーションを作れるソフトウェアとしてFlashがありますが、今回紹介するK-Sketchもシンプルながらアニメーションが作...

40855?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f07%2fscreenshot-2012-07-18-10.32.10_thumb

  • 2012/07/25

JavaScript製の高度なアニメーションライブラリ「tween.js」

tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。...

List

  • 2012/07/17

Mozilla製。みんなで作るイラストアニメーション「Parapara Animation」

Parapara Animationはタブレットなどで描いたイラストをアニメーションを作成するMozilla製のソフトウェアです。Mozillaが作り出すソフトウェアはオープンなWebを実感させるものが多数あります。今回はParapara Animationを紹介します。ベースになる大きなキャンバスの上にみんなが作った...

List

  • 2012/05/19

JavaScript/CSSを使ってスクロールによるアニメーションを実現「skrollr」

skrollrはCSSを使ってスクロールによってアニメーションを実行するライブラリです。最近プロジェクトやアプリ紹介ページで見られるようになったスクロールアニメーション。それを実現するライブラリがskrollrです。デモです。スクロールを開始します!回転しながら飛んでくる文字!下から上がってくる文字!横からスライドも。...

38579?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f05%2fscreenshot-2012-05-08-11.24.33_thumb

  • 2012/05/18

キーフレームを使ったCSSアニメーションを実現「jQuery keyframe」

jQuery keyframeはCSSのスタイルの中で%を使ってアニメーションをキーフレーム単位で設定できるjQueryライブラリです。CSS3のパワーアップによってCSSだけで絵を描いたり、アニメーションしたりする試みが増えています。今回はその一つ、JavaScriptと組み合わせることでさらにキーフレームを使ったア...

38426?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f05%2fscreenshot-2012-05-02-12.56.51_thumb

  • 2012/05/13

マウスを動かすと影が動く、そんなちょっとしたアニメーション「Real Shadow」

Real Shadowはマウスを動かすとオブジェクトの影が動く、そんな目を引くアクションができるJavaScriptライブラリです。マウスを追従する仕組みは目を引きやすいです。そんな仕組みの一つとしてReal Shadowを紹介します。マウスを動かすと影が動く仕組みです。多数のオブジェクトが並び、その影が描かれています...

35747?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f02%2fscreenshot_2012_02_14_11_01_03_thumb

  • 2012/02/23

ニホンノアニメサイコー「Kanade」

Kanadeは日本のアニメ放送情報をシーズンごとに一覧するiPad/iPhone向けWebアプリケーションです。日本のアニメは海外でも人気の高いコンテンツの一つです。そんな日本でのアニメ放送に関する情報をiPadやiPhoneでもすぐに確認できるようにしたのがKanadeです。まずはデスクトップ、iPad向け。右側にシ...

List

  • Premium_s 2012/01/17

HTML5を活用したWebアニメーションライブラリ×12選

HTML5の登場によってCanvasやSVGといった新しい技術にも標準で対応し、さらにAPIが追加されたこともあってJavaScriptでできることが格段に広がっています。さらにCSS3も見逃せません。そんな訳で今回はJavaScript/CSS3を使ってアニメーションを実現するライブラリやサービス、ニュースについて取...

34235?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2012%2f01%2fd180b4ba4867895fbff00828cdfb8b94

  • 2012/01/14

スクロールで発動するダイナミックなアニメーション「scrollorama」

scrolloramaはスクロールで制御される文字列をアニメーション化するJavaScriptライブラリです。Webページでインパクトある表現を求めている方にお勧めしたいのがscrolloramaです。最初の表示です。ここから下にスクロールしていきます。まず上にあった文字がばらけていきます。下にある文字が回転しながら収...

33556?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f12%2fscreenshot2011-12-19-14.26.412_thumb

  • 2011/12/29

Flashいらず?な2Dアニメーション作成ソフトウェア「Synfig Studio」

Synfig Studioはマルチプラットフォームで動作する2Dアニメーション作成ソフトウェアです。2Dアニメーションを作成するソフトウェアというとFlash CSが有名ですが、今回紹介するのはオープンソースのSynfig Studioです。高機能な2Dアニメーション作成ソフトウェアになります。インストーラーでインスト...

32409?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-25-10.58.46_thumb

  • 2011/12/03

CSS3を使った高度なアニメーションライブラリ「Animate.css」

Animate.cssはCSS3を使ったアニメーションライブラリです。様々なイフェクトが用意されています。Animate.cssはCSS3を使ってアニメーションを実現するライブラリです。何はともあれ、デモ動画を見て何が実現できるのか知ってください。トップページです。ここの各ボタンを押すとアニメーションが実行されます。デ...

32252?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fscreenshot2011-11-21-17.09.22_thumb

  • 2011/11/29

Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ「CAKE(Canvas Animation Kit Experiment)」

CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE(Canvas Animation Kit Experiment)はCanvasタグを使ってアニメーションを実現しま...

31547?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f11%2fd0c6fc321306d65fa7166cebbde4bc00

  • 2011/11/13

要注目!CSSとJavaScriptで作るアニメーション「Animatable」

AnimatableはJavaScriptでCSSのプロパティを変化させることでアニメーションさせるJavaScriptライブラリです。最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニ...

29820?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f09%2fscreenshot2011-09-20-17.49.54_thumb

  • 2011/10/02

注目!Flash CS風のUIでHTML5のタイムラインアニメーション作成「Radi」

RadiはHTML5対応のタイムラインベースのアニメーション作成ソフトウェア。RadiはMac OSX用のフリーウェア(β版中につき無料)。Webブラウザ上でインタラクティブでタイムラインベースのアニメーションを作ろうと思ったらFlashを使うのが一般的だ。しかしそれはHTML4までだ。HTML5になればCanvasタ...

27544?type=list&url=http%3a%2f%2fwww.moongift.jp%2fwp-content%2fuploads%2f2011%2f06%2fscreenshot2011-06-13-10.13.41_thumb

  • 2011/06/24

ついにここまで。Web上でアニメーションを作成する「AJAX Animator」

AJAX AnimatorはWebブラウザ上でフレーム単位のアニメーションを作成するWebアプリケーション。AJAX AnimatorはPHP製のオープンソース・ソフトウェア。Webアプリケーションの領域が広がっている。Webアプリケーションが数多くなると、よりWebの利用率が上がり、さらにWeb化を促していく。これま...