[JS]クロスブラウザ対応、背景をアニメーションで変更するスクリプト -Blend

背景をアニメーションで変更する軽量(1.4KB)のスクリプトを紹介します。

デモのキャプチャ

jQuery Blend
demo

デモではCSSのみの動作と比較して、ふわっと光るように背景が変更するエフェクト、アニメーションが繰り返すループモード、オンとオフが入れ替わるリバースモードが楽しめます。

実装方法は簡単で、背景の変更はスタイルシートで行い、jQueryとBlendを外部ファイルとして下記のスクリプトを記述します。

スクリプトではアニメーション機能を追加するだけなので、スクリプトのオフ時にはスタイルシートで指定した通りに動作します。

スクリプトのオプションでは、エフェクトの種類、スピード、不透明度などが変更できます。

BlendはjQueryのプラグインのため、実装にはjquery.jsが必要です。
対応ブラウザはIE6/7/8, Fx2/3, Op9, Safari3/4, Chromeとなっており、ライセンスはMIT Licenseとのことです。

sponsors

top of page

©2018 coliss