Maccle

【モジュール】iTunesのカバーフローのようにコンテンツをめくる3Dエフェクトを表現する「Kontext」

約2分
【モジュール】iTunesのカバーフローのようにコンテンツをめくる3Dエフェクトを表現する「Kontext」

iTunesや Mac OS X、iOSなどでおなじみのカバーフローアニメーションにインスパイアされて作られたページめくりエフェクトを表現してくれるサンプルモジュール、「Kontext」。

Javascriptと、CSS3のtransformとanimationを駆使して表現しています。

jQueryなどのライブラリを必要としないので、かなり軽量。

デモはこちら

カバーフロー全体を入れるブロック要素に “kontext” クラスをセットし、div で括った複数のブロック要素に、それぞれ “layer” クラスをセットするだけで動作します。あら簡単。

デモでは、リストタグ(ul)に “bullets” クラスだけをセットして、Javascriptで “layer” クラス分のリスト(li)を生成して ul に挿入してます。

CSSで表示領域を限定すれば、例えばブログの新着記事一覧のスライドナビゲーションをカバーフローアニメーションで実装するなんてこともできそうです!

ライセンス
MIT
(商用利用可、要著作権表示、改造/再配布可)

Kontext on GitHub

Leave A Reply

*

Comment On Facebook