Maccle

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

June 5, 2013
約 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

About The Author

某IT系なんちゃってエンジニアヨーダ
Apple好きだけど盲目マカーは気持ち悪いと思ってる中道だと思い込んでるしがないダメダメエンジニア。

今もってるApple製品↓
Macbook Pro 15 inch, iMac 27 inch (Late 2009), iPhone 6 Plus, iPad (初代! いらない!)
Follow :

Leave A Reply

*

Comment On Facebook