2008年01月30日
Ajax:script.aculo.usでもモーショントゥイーン
志田です。
先日、@ITに書かせていただいた、
が公開されました。
これで、「パターンとライブラリで作るAjaxおいしいレシピ(4)」の連載も
・第1回 jQueryを使ってTwitterをおいしくマッシュアップ (1/4) ─ @IT
・第2回 prototype.jsでYouTubeをインクリメンタルサーチ (1/3) ─ @IT
・第3回 Ext JSとprototype.jsで作るリッチなUI(1/4) ─ @IT
と、4回書かせていただきました。ご興味がありましたら是非、読んでみてください。
■本題
宣伝はさておき、今回の本題ですが、
「第4回 Ajaxの弱点を補うscript.aculo.usの楽しいエフェクト(1/4) ─ @IT」でもとりあげた、script.aculo.usによるモーショントゥイーンを実現するプログラムを、ダウンロードできるようにしました。
■デモ
script.aculo.usでこういうエフェクトができるようになります。
横方向、縦方向、それぞれのプルダウンの値を変更すると動き方が変わります。
横方向:
縦方向:
ダウンロード: easing_functions_for_scriptaculous.js (9.2KB)
このプログラムは、舘野さん(id:secondlifeさん)のJSTweenerのeasing関数を、script.aculo.usのtransitionの仕様に合うように移植したものです。
現状、いくつかのeasing関数はまだ移植できていません。移植済みのeasing関数は下記のものです。
・easeNone
・easeInQuad
・easeOutQuad
・easeInOutQuad
・easeInCubic
・easeOutCubic
・easeInOutCubic
・easeOutInCubic
・easeInQuart
・easeOutQuart
・easeInOutQuart
・easeOutInQuart
・easeInQuint
・easeOutQuint
・easeOutSine
・easeInOutSine
・easeInExpo
・easeOutExpo
・easeInCirc
・easeOutCirc
・easeInBack
・easeOutBack
・easeOutBounce
まだ結構未移植のものがあるのですが、忙しくなって来たのでとりあえず公開をさせていただきました。
反響があれば残りも移植していきたいと思います。
■利用の仕方
このプログラムをダウンロードして、prototype.jsやscript.aculo.usを読み込むのに加えて、<script>タグでこのプログラムも読み込ませます。
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="easing_functions_for_scriptaculous.js"></script>
あとは、通常のtransitionの指定の仕方と同じで、下記のように指定できます。
new Effect.Move($('target'),
{x: x,
y: y,
transition: Effect.Transitions.easeOutBounce});
■ライセンス
JSTweenerと同じ、MIT Lisenseです。
よろしければご利用ください。
投稿者 shida : 2008年01月30日 08:05 | |
この記事は参考になりましたか?
« 前の記事:中小企業ができる社会・環境貢献:2007年度は7団体に寄付しました
トラックバック
このエントリーのトラックバックURL:
http://www.ark-web.jp/blog/mt-tb.cgi/394
【!】本記事への言及がない記事からのトラックバックは、削除する場合があります。
コメント
コメントはこちらからどうぞ
Taggingをテストしています
- Web 2.0 (83)
- Google (62)
- RSS (44)
- Ajax (40)
- SNS (40)
- ビジネスブログ (37)
- Yahoo! (24)
- Podcast (24)
- Web2.0 (23)
- ブログ (22)
- SEO (22)
- CGM (21)
- SEM (19)
- EC (19)
- Movable Type (19)
- サーチエンジン (18)
- オープンソース (17)
- Videocast (17)
- マッシュアップ (17)
- CSR (16)
- マーケティング (16)
- アークウェブ (15)
- JavaScript (15)
- UI (14)
- API (14)
- YouTube (13)
- ケータイ (13)
- ソーシャルブックマーク (12)
- Skype (12)
- Blogosphere (12)
- RSSフィード (12)
- Vodcast (11)
- CMS (11)
- Webマーケティング (10)
- Mashup (10)
- Microsoft (10)
- ショートビデオ (9)
- Google Maps (9)
- アクセス解析 (9)
- Apple (8)
- Twitter (8)
- ユーザビリティ (8)
- システム開発 (8)
- mixi (8)
- アフィリエイト (8)
- ECサイト (8)
- Zen Cart (8)
- Digg (8)
- iPod (8)
- Google Base (8)
- Total Keywords: 749
- Total Keywords(Sum): 2029
- by Tagwire Plugin
人気記事
ランキング
- 2005年でもっともイケてたWeb 2.0サービス ベスト10 (1017pts.)
- 「Web Site Expert」誌に「ECサイト構築/運用術」を寄稿、Zen Cart記事も (661pts.)
- “Vlog” - ムービー(動画)で綴るブログの楽しさ (562pts.)
- Ajaxの活用事例:Amazon.com - Diamond Searchの快適な宝石検索体験 (555pts.)
- 内田・鮫島法律事務所様 〔Webサイト全面リニューアル〕 (540pts.)
- アクセシビリティのチェックポイント ~日経BP「電子自治体ポータル」の連載コラムから~ (535pts.)
- CNET「ネットのエマージングサービス」カンファレンスを聴いて(前編) (507pts.)
- Podcasting(ポッドキャスティング)の行く末 - Seth Gordinが語る (495pts.)
- Tagwire Pluginを使ってビジネスブログでTag(タグ)をサポートしてみました (485pts.)
- 株式会社ジーエムインターナショナル 様 〔Webサイト全面リニューアル〕 (470pts.)
カテゴリー
- Ajax (システム開発)
- CMS(コンテンツマネジメント・システム)
- CSR(企業の社会的責任)
- PukiWiki
- RIA (システム開発)
- Ruby on Rails(システム開発)
- SEM・サーチエンジン広告
- SEO・サーチエンジン最適化
- Snippy(SNS・ソーシャルブックマーク)
- Web 2.0
- WebSig24/7
- Webアクセシビリティ
- Webデザイン
- Webマーケティング
- Webユーザビリティ
- Web・ITニュースクリップ
- XP・アジャイル(システム開発)
- Zen Cart(オンラインショップ構築)
- ecoったー
- necoったー
- アークウェブ
- オープンソース
- セキュリティ(システム開発)
- テスト(システム開発)
- データベース
- ビジネスブログ・MovableType
- ビッグイシュー(The Big Issue)
- マッシュアップ
- 唐松(アクセス解析)
アーカイブ
- 2008年01月
- 2007年12月
- 2007年11月
- 2007年10月
- 2007年09月
- 2007年08月
- 2007年07月
- 2007年06月
- 2007年05月
- 2007年04月
- 2007年03月
- 2007年02月
- 2007年01月
- 2006年12月
- 2006年11月
- 2006年10月
- 2006年09月
- 2006年08月
- 2006年07月
- 2006年06月
- 2006年05月
- 2006年04月
- 2006年03月
- 2006年02月
- 2006年01月
- 2005年12月
- 2005年11月
- 2005年10月
- 2005年09月
- 2005年08月
- 2005年07月
- 2005年06月
- 2005年05月
- 2005年04月
- 2005年03月