2次元物理計算エンジンをブラウザで実現する「Matter.js」
面白いアニメーションを作るために物理演算エンジンを使いこなせればとても便利ですが、自力で物理演算に取り組むには高度な知識と技術が必要となります。そんな扱いの難しい物理演算を手軽に導入できるJavaScriptのAPIが「Matter.js」です。 Matter.js - a 2D rigid body JavaScript physics engine http://brm.io/matter-js/ Matter.jsでどんなことができるのかはデモを見れば一発で分かります。上記サイトの「Demo」をクリック。 すると、「Matter.js Physics Engine Demo」という物理エンジンのデモページが開くので、プルダウンメニューにあるデフォルトパラメータを指定して、「Reset」をクリックすればOK。2Dのアニメーションが再生され、Matter.jsでどんなことができるのかが直
アニメーションや演出が冴えてる映画のサイト | バシャログ。
山下達郎のベストを買って毎日聞いているminamiです。4枚もあるので順番に聞いても飽きません。 サイトで動きのある派手な演出を使いたいんだけど、思いつかない！という時。自分の好きな映画のサイトを見てみて目から鱗が落ちたので、面白い試みをしている映画のサイトをまとめてみました。この秋観たい映画を探している方もどうぞご覧ください。 アウトレイジ ビヨンド 今週末から公開の期待の映画です！長いスクロールを使ってコンテンツを1ページにまとめた構成、jQuery Masonryを使ったレスポンシブなレイアウト、ソーシャルメディアとの連携など、一通りのトレンドを押さえた作りになっています。デザイン的にも黒とピンクというショッキングなカラーをメインにしつつもとても見やすくスタイリッシュにまとまっていますね。サイト内のコンテンツには「いいね！」ならぬ「悪いいね」がつけられるところも、映画の世界観にマッチ
JSだけでここまで画像編集できちゃうのが分かるツール＆jQueryプラグイン「JSManipulate」:phpspot開発日誌
JSだけでここまで画像編集できちゃうのが分かるツール＆jQueryプラグイン「JSManipulate」 2011年08月08日- JSManipulate - Javascript Image Filters & Effects JSだけでここまで画像編集できちゃうのが分かるツール＆jQueryプラグイン「JSManipulate」。 ブラウザ上で画像を瞬時に編集できちゃいます。フィルタもかなり大量にあって様々なエフェクトがかけられます。 jQueryプラグインの形で、いつでも自由にリアルタイムエフェクトをかけたりもできるみたい。 アニメーションも可能。ということで一見の価値ありです。 パラメータをいじるだけで画像編集できます。 フィルタも大量に存在。 以下、エフェクト例 jqueryのコードでいえば例えば、次のようなコードで実現できるようです。 $(element).jsManipul
[JS]ダイナミックなアニメーションでレイアウトを変更するスクリプト -Isotope
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード： CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング： jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート： あらゆるデータからソートが行えます。 各機能の互換性： レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化： Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ（IEなど）は、JavaScriptでアニメーションを実現します。 Isotopeの実装
CSS3の3Dトランスフォームを使って螺旋状に画像をアニメーションさせるサンプル:phpspot開発日誌
Breathtaking animated CSS3 helix using 3d transforms CSS3の3Dトランスフォームを使って螺旋状に画像をアニメーションさせるサンプル。 スクリプトを使わず、3Dトランスフォームだけで次のようにアニメーションさせてるようです。 JSだけでやるのでも大変そうな処理ですが、ＣＳＳで出来ちゃうっていうのがすごいですね デモページ イメージとしては、画像を縦に100分割して、CSSスプライトみたいにして画像を分割させます。 あとはアニメーションさせるというハックによって実現させてるようです。 CSS3の機能が拡張されて、今後、あっと驚くようなハックもどんどん出てくるんでしょうね。 関連エントリ CSS3の擬似クラスをIE6-8でも使えるようにする「Selectivizr」 便利なCSS3ツール6つ＋α CSS3のジェネレーター１４種 IE6-8で
Finally: Sprite animations implemented via CSS3 Animations - Paul Bakaus' blog
Warning: This is hackier and more dirty than anything I have published in recent years, and only works in WebKit. Use with extreme caution. I’m lazy, show me the end result first! CSS Animations are great – they are a lot less pain for the normal web developer, are rendered more smoothly as the browser can control the framerate, and even become hardware accelerated. You can animate almost everythi
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
US Open Sessions - Motion Demo