前の記事 ≪:2012年6月11日 管理人のブックマーク
次の記事 ≫:綺麗にデザインされたピクトグラムアイコン100個セット

CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」

2012年06月12日-はてなブックマーク

スポンサード リンク
[PR] 日々膨大に出現するJS/CSSライブラリ等を意識にとどめておく方法
jQuery Transit - CSS3 animations for jQuery

CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」。



CSS3のanimation、transitionアニメーションがありますが、これをjQueryのanimate風にしてより直感的に使いやすくするものです
CSS3にアニメーションを書くのは気持悪いという方は、こうしたライブラリを活用してみるとよいですね
使い方は以下のように、animateの代わりに transition というメソッドを使うというものです。

$('.box').transition({ x: '90px' });

コードとデモの例









他にも3Dに回転するアニメーションやイージング等、アニメーションはこれでOKというぐらい多彩なアニメーションが可能です。
組み合わせることでダイナミックな表現をJavaScriptでより分かりやすく記述することができそうですね

関連エントリ
関連の記事検索:jQuery, CSS3, アニメーション, CSS
スポンサード リンク

By.KJ : 2012年06月12日 09:01 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)