高速なCSSアニメーションをJSで制御できる「animo.js」:phpspot開発日誌
animo.js ? Labs by Big Room Studios 高速なCSSアニメーションをJSで制御できる「animo.js」。 jQueryベースで利用でき、$(element).animo(args)として簡単に利用が出来ます 個人的にはCSSよりもとっつきやすいなぁという印象です。CSSアニメーションはハードウェアアクセラレーションで環境によっては速いですしね。 コード例。 関連エントリ バウンスさせたりできるページのアニメーションスクロール実装jQueryプラグイン「AnimateScroll」 画像にマウスオーバーでリアルに立体化する3Dアニメーション実装デモ 光ながらアニメーションさせるエフェクト作成jQueryプラグイン「Flare」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 フラットだけど立体的なCSS
シンプルなスプライトアニメーションライブラリ 「MovieCrop.js」 - Mach3.laBlog
この記事は賞味期限切れです。（更新から1年が経過しています） CSSスプライトを使用したアニメーションライブラリは既に色々と選択肢がありそうですが、 敢えて今回これを書いてみたのは、ローテクでごくシンプルな物が欲しかったから。 さらに言ってみれば、それらの選択肢をまだ知らなかったから。 MovieCrop.jsについて MovieCrop.js via Github MovieCrop.jsは、CSSのbackground-imageを利用したアニメーションを実装するjQueryプラグインです。 名前から推察されるように、ActionScriptのMovieClipを模して作った…つもりです。 再生/逆再生/停止/巻き戻しが出来ます。 簡単な使い方 まず使用する画像を作成し、ブロック要素の背景にします。 要するにブロック要素のサイズの分だけ背景をズラしていってアニメーションさせる仕組みなの
[JS]このアニメーションはかなりカワイイ！折り畳んだ紙をパタパタ広げるスクリプト -PFold
展開と共に、移動のアニメーションが加わります。 PFoldの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link rel="stylesheet" type="text/css" href="css/pfold.css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.pfold.js"></script> Step 2: HTML コンテンツの初期状態と最終状態をそれぞれdiv要素で実装し、div要素で内包します。 <div id="uc-
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
