最近はWebデザインと言っても静的なものだけでなく、クリックやマウスオーバー時などのイベントに基づくアニメーションなども必要になっています。それによって一歩先行くデザインに仕上がります。 しかしアニメーションはちょっとした違和感などで台無しになってしまう可能性も秘めています。今回はそんな失敗を防ぐべく、AniJSを紹介します。

AniJSの使い方

一例です。バウンドしたり落ちたりします。

別な例です。タブと組み合わせたアニメーションです。

アニメーションだけでなく、メニューなどのUI/UXも提供されています。

AniJSはCSS3を使ったアニメーションに加えて、タブバー、アコーディオン、モーダル、メニュー、通知、スクロール連動型コンテンツ表示なども提供しています。滑らかなアニメーションを加えることによってUIをより魅力的にできることでしょう。

AniJSはJavaScript/CSS3製のオープンソース・ソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

AniJS, A Library to Raise your Web Design without Coding anijs/anijs: A Library to Raise your Web Design without Coding.