[JS]クロスブラウザ対応、背景をアニメーションで変更するスクリプト -Blend
Post on:2009年7月10日
sponsors
背景をアニメーションで変更する軽量（1.4KB）のスクリプトを紹介します。
デモではCSSのみの動作と比較して、ふわっと光るように背景が変更するエフェクト、アニメーションが繰り返すループモード、オンとオフが入れ替わるリバースモードが楽しめます。
実装方法は簡単で、背景の変更はスタイルシートで行い、jQueryとBlendを外部ファイルとして下記のスクリプトを記述します。
|
1 2 3 4 5 |
<textarea name="code" class="js" cols="60" rows="5"> $(document).ready(function(){ $("#demo a").blend(); }); </textarea> |
スクリプトではアニメーション機能を追加するだけなので、スクリプトのオフ時にはスタイルシートで指定した通りに動作します。
スクリプトのオプションでは、エフェクトの種類、スピード、不透明度などが変更できます。
BlendはjQueryのプラグインのため、実装にはjquery.jsが必要です。
対応ブラウザはIE6/7/8, Fx2/3, Op9, Safari3/4, Chromeとなっており、ライセンスはMIT Licenseとのことです。
sponsors
