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


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

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

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

IT/WEB業界への転職なら求人サイトGreen

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

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

設置の仕方

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

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




次にCSSを設定します。



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

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


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

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

follow us in feedly