• かちびと.net

    CSS3のハードウェアアクセラレーターを使ったビジュアルエフェクト生成用jsライブラリ・Alice.jsのご紹介。なかなか凄いですねー。スマフォ向けの開発者さん向けライブラリです。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

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

スポンサーリンク

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

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

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

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

Alice.js


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

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

一応キャプチャ。

Toss


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

Wobble


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

Rotate


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

Spring


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

Bounce


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

Carousel


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

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

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

Alice.js

URL :
TRB :

Comments & Trackbacks

Comments are closed.

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services