一枚の画像をjQueryでアニメーションさせるプラグイン「jAni 」

0

preview16
jAniは背景画像をアニメーションさせるjQueryのプラグインです。

通常であれば画像をアニメーションさせるにはアニメーションGIFを使用するのが一般的ですが、256色しか使用できないという制限もあります。
このプラグインを使用すると、アニメーションGIFの制約がなくなるため綺麗なアニメが制作可能です。

まずはデモをご覧下さい。

用意するのは縦長の画像一枚のみ

8pm_bor
実際に必要な画像は縦長の画像一枚のみです。
設定でアニメーション速度(画像の切替速度)を変更する事ができます。

設置の仕方

設定も簡単にできるようです。

まずはjsを読み込みます。



次にCSSを設定します。


htmlに表示する位置をdivで指定します。

最後にjsでフレームレートを設定すれば完了です。


サイトでアニメーションを設定する際に使用してみてはいかがでしょうか。

OpenSourceなJavaScriptTooltipライブラリの「CoolTips」

0

CoolTips
CoolTipsは超軽量(2KB)のjavascriptフレームワークです。

ToolTipの表示に特化したライブラリのため、動作も軽快です。

以下でデモが確認できます。

タイトル属性の値を表示するようですので、javascritpを読み込む以外は特に設定もいらないようです。

動作にはprototype + script.aculo.usが必要なようです。

TOPページのLIST表示に使えるjQueryプラグインFeature List

0

featurelist
Feature Listは、企業サイトでのおすすめ商品表示などに使えるjQueryプラグインです。

Flashを必要としない、なめらかなフェードイン、フェードアウトアニメーションでアイテムを切り替える事ができます。

デモ画面で動作を確認できます。

以下のようなコードで実装できるようです。

$.featureList(
	$("#tabs li a"),
	$("#output li"), {
		start_item : 1
	}
);

// Alternative

$('#tabs li a').featureList({
	output		: '#output li',
	start_item	: 1
});

簡単に設置できるアニメーション切り替えを探している方はぜひ。