CSS3のハードウェアアクセラレーターを使ったビジュアルエフェクト生成用jsライブラリ・Alice.js

Ads

気になったので備忘録的に触って見ました。
ハードウェアアクセラレーターを使った
CSS3の新機能を実装出来るjsライブラリ・
Alice.jsです。と、分かったような事を
書きましたが、まだちょっと勉強不足で
いろいろ調査中です。ので内容にはあまり
期待しないで下さい。

アクセラレーターに関しては以下の記事がわかり易いです。

iOSのアクセラレーターが使えるCSS3

このアクセラレーターを使って高度なビジュアルエフェクトの生成をちょいと簡略化しよう、という意図で作られたライブラリみたいです。

Alice.js


サンプルを見たほうが早いと思いますので以下でChromeかiOSにてご覧下さい。6つ用意しました。

出来ればiPhoneなどの実機でご覧頂くと動作の滑らかさが伝わると思います・・・デモによってはちょっとモバイルでは見にくいものもあるんですがご了承ください。

一応キャプチャ。

Toss


フェードインと回転しながら出現します。

Wobble


Change Settingsで設定してお楽しみください。直訳すると「ぐらぐらする」みたいな・・いわゆる「振り子」のアニメーションエフェクトを可能にします。

Rotate


その名の通り回転エフェクトです。面白い。

Spring


ばねの様な動きを実現します。

Bounce


バウンドするアニメーションエフェクトです。デモは不自然ですけど、一応わかり易いようにドロップシャドウは残しました。

Carousel


カルーセル真紀。右上でいろいろ変更できるのでテストしてみてください。

では使い方を・・と言いたいんですが、僕もまだ使えるレベルじゃないので控えておきます・・・デモも配布されていますので、このように変更するだけなら容易ですし、コードを見ればなんとなくですが使い方は把握できるんじゃないかなと思います。

ライセンスは ApacheライセンスVer2です。

Alice.js