category
サイト構築 -JavaScript

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

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

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

デモのキャプチャ

jQuery Blend
demo

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

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

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

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

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

Post on:2009年7月10日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

ページの先頭へ




© coliss

RSS