CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」
2012年06月12日-
スポンサード リンク
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でより分かりやすく記述することができそうですね
関連エントリ
CSS3アニメーションをjQueryで使いやすくするプラグイン「jQuery Transit」。

CSS3のanimation、transitionアニメーションがありますが、これをjQueryのanimate風にしてより直感的に使いやすくするものです
CSS3にアニメーションを書くのは気持悪いという方は、こうしたライブラリを活用してみるとよいですね
使い方は以下のように、animateの代わりに transition というメソッドを使うというものです。
$('.box').transition({ x: '90px' });
コードとデモの例




他にも3Dに回転するアニメーションやイージング等、アニメーションはこれでOKというぐらい多彩なアニメーションが可能です。
組み合わせることでダイナミックな表現をJavaScriptでより分かりやすく記述することができそうですね
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- 2000個近いフリーのピクトグラムアイコン「tabler-icons」
- ページスクロールで背景ムービーが動くページが作れる「ScrollMovie」
- テキストがシャッフルされてかっこいいMENU実装
- 手書き風ピクトグラムアイコン400種「Doodle Icons」
- 色のカスタマイズやブレンドをできるオンラインツール「hue.tools」
- JSを一切使わないCSSでできたドロップダウンなどのUI実装「CSSUI」
- ダークモードにも対応したシンプルなページ作成に使える「Simple.css」
- Three.jsで画像をピクセルっぽくゆがめるサンプル
- スクロールに応じて3Dオブジェクトが動作するThree.jsを使ったデモ
- 丸文字が可愛いフリーフォント「ZEN丸ゴシックN」
- 過去のエントリ