JavaScriptとCSS Spriteを組み合わせてアニメーション·MovieCrop.js MOONGIFT
MovieCrop.jsはCSS Spriteを使ったアニメーションライブラリです。 Sprite画像を使うとマウスオーバーと連携させてボタンの押し下げによる配色変更を行ったりできます。それと似たような仕組みを使ってアニメーションを実現してしまうのがMovieCrop.jsです。 例。単純にくるくる回転し続けます。 再生、停止、逆再生もサポート。 コールバックを使って順番にアニメーションさせることもできます。 アニメーションの素材になる画像はSprite画像になっている必要があります。それをJavaScriptを使って順番に変更していくことでアニメーションのように見せることができます。カスタマイズもできるので色々な見せ方に使えそうです。 MovieCrop.jsはJavaScript製のオープンソース・ソフトウェア（MIT License）です。 MOONGIFTはこう見る Web上でアニ
すげえ！Webブラウザ上だけでアニメーションGIFを作成·Mothereffing animated gif MOONGIFT
Mothereffing animated gifはWebブラウザ上で任意の画像からアニメーションGIFを作成するソフトウェアです。 これまではローカルのアプリケーションでしか出来ないと思っていたようなことがどんどんWebアプリケーションでできるようになっています。今回は画像をまとめてGIFアニメーションにしてしまう、そんなMothereffing animated gifを紹介します。 まず画像をドロップします。 画像サイズ、切り替え時間、クオリティなどを変更できます。終わったらAnimateボタンを押します。 ちゃんとアニメーションGIFになりました。 画像を入れ替えたり、回転させることもできます。 Mothereffing animated gifはサーバサイドに画像をアップすることなく、クライアントサイドだけで画像の処理を行います。GIFなのでJPEGをアップするとかなり画像が荒く
品質高いJavaScriptアニメーションライブラリ·BonsaiJS MOONGIFT
BonsaiJSはFlashアニメーション並みの動作が可能なJavaScriptライブラリです。 JavaScriptによるアニメーションライブラリが増えています。BonsaiJSもその一つです。多彩なアニメーション処理が可能になっていますのでぜひご覧ください。 トップページです。ここもアニメーションされています。 マウスを動かすとブロックが表示されます。 グラフです。マウスのあたっている部分が大きくなります。 スターです。ぐりぐり動きます。 オブジェクトが飛び交います。 Pongを実際に遊べます。 円がダンスするように動きます。 ドラッグで動かせます。 デモを実際に動かした動画です。 BonsaiJSはキーフレームベースのアニメーション、画像だけでなくパスにも対応し、モーフィングもできます。マウスによる操作も可能で、Flashの代わりはもちろんゲーム開発にも使えるのではないでしょうか。
JavaScriptでインパクトあるアニメーションを実現·jsAnim MOONGIFT
jsAnimはJavaScript製のアニメーションライブラリです。 Webページ上にインパクトあるアニメーションを実現しようと思ったら、これまではFlashを使うのが一般的でした。しかし今後はJavaScriptで十分かも知れません。そんな未来を感じさせるのがjsAnimです。 サンプルです。キャラクターが左右に動きます。 動かし方も色々あるのでぜひ触ってみてください。 トップページの動画 jsAnimはオブジェクトの上下左右の動きはもちろん、そのスピードも可変にしたり移動を計算処理によって滑らかに処理できます。各オブジェクトをそれぞれタイムラインベースで操作することで、大きな一つの作品が実現するでしょう。 jsAnimはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。 MOONGIFTはこう見る 見た目のインパクトを考えた場合、やはりアニメーションとい
JavaScript製の高度なアニメーションライブラリ·tween.js MOONGIFT
tween.jsはActionScriptのTweenクラスを真似たJavaScriptアニメーションライブラリです。 かつてオンラインでアニメーションを表現しようと思ったならばFlashかGIFアニメーションを使うのが一般的でした。しかし今後JavaScriptの採用が増えていく中では別な作法を学ばなければなりません。そこで今回はJavaScript製のアニメーションライブラリtween.jsを紹介します。 デモ1。四角のエレメントが左右に動き回ります。 1,000本のバーが左右に動きます。 4096個のセルが徐々に色を変化させます。 グラフです。様々な描き方に対応しています。 動画の再生に合わせて右に動いていくデモです。同期されているのがポイントです。 デモ動画です。本当はもっと速く動きます。 tween.jsはActionScriptのTweenクラスを模して作られているとの事です。
How To Create Web Animations With Paper.js — Smashing Magazine
The Web is just starting to use animation well. For years, animated GIFs and Flash ruled. Text moved and flashed, but it was never seamless. Animations had boxes around them like YouTube videos. HTML5 canvas changes everything about Web animation. The Web is just starting to use animation well. For years, animated GIFs and Flash ruled. Text moved and flashed, but it was never seamless. Animations
Webの表現力はここまで来た。Canvasタグを使ったアニメーションライブラリ·CAKE（Canvas Animation Kit Experiment） MOONGIFT
CAKEはCanvasタグを使ってグラフィカルなアニメーション描画を行うJavaScriptライブラリです。 HTML5のCanvasタグによってWebの表現力は格段に増したと言えます。今回紹介するCAKE（Canvas Animation Kit Experiment）はCanvasタグを使ってアニメーションを実現します。多彩なデモがあるのでぜひ公式サイトでチェックしてみてください。 最もシンプルなデモです。サークルが回転します。 それを描いているHTMLタグです。結構複雑ですが、見がたい訳ではありません。 色々なデモあります。 流れるような動きが格好いいです。 マウスで大きさを変えられます。 大きなモデルの周囲を小さなモデルが回ります。 ベジュ曲線調に光が下りていきます。 枝が進んでいくデモです。 四角が回転するデモです。 SVGを表示するデモです。 デモ動画です。 CAKEはアニメー
Animatable: One property, two values, endless possiblities
box-shadow ◀ ▶ From: 0 0 black To: 0 150px 10px -50px rgba(0,0,0,.5) Author: @leaverou Tweet
Morf.js - CSS3 Transitions with custom easing functions
Native These are the natively supported easing functions, built into WebKit. linear ease ease-in ease-out ease-in-out Custom These are custom easing functions (thanks to Robert Penner & Thomas Fuchs) that can produce much more interesting transitions. Generated Animation CSS Internally the custom easing function for the transition is faked using CSS animations. Here is the code that is produced on
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - bnthor/animon: Animate DOM elements when the appear in the viewport
Let's get animating! | GSAP | Docs & Learning
http://kiro.me/textualizer/