TOP  >  WebDesign  >  jQueryを使ってロールオーバーのエフェクトを操る「Blend, a jQuery plugin」
2009年07月10日

jQueryを使ってロールオーバーのエフェクトを操る「Blend, a jQuery plugin」

バナーだったりボタンだった、ロールオーバーエフェクトはWEBの中でいたるところに用いられていて、その手法や実現方法も様々だと思いますが、今日紹介する「Blend, a jQuery plugin」はCSSの背景処理をコントロールできるプラグインです。

jqueryblend01

ナビゲーションを例にして実例が示されていて、ゆっくりと浮き出てきたり、点滅させたり、逆にだんだん解けしていくと言ったような事が設定可能です。

詳しくは以下

基本的にアニメーションはCSSで成業する事が可能で、基本値にパラメーターを付与していく事で様々なエフェクトを実現する事が可能です。

カバーしているブラウザは「Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8」と幅広いですが、IE6では一部動作しない部分もあります。ライセンスはMIT License.となっています。ロールオーバーに新しい動きを取り入れたいと言う方はお手軽に実装できるのでオススメです。実際のデモの閲覧、サンプルソース、スクリプトのダウンロードは「」からどうぞ。

Blend, a jQuery plugin effect for CSS backgrounds

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればこちらからご連絡ください。即刻削除いたします。
posted 05:48  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。

【ご注意】「Designworks」の旧ホームページドメインを利用したWEBサイトにご注意ください
Template deisgn by iDEACLOUD inc.
トップに戻る