サイト内検索:

DIV要素を紙のように折りたたむ「Paperfold CSS」

The plugin takes a dom element, slices it into parts and arranges them like a folded paper in 3d space.

Paperfold CSS | Demo Studio | Mozilla Developer Network

developer.mozilla.orgで紹介されていたのでFirefoxでしか動かないのかな、と思ったらSafariでも動いたのでご紹介。

こんな感じのデザインを実現することができます。

Paperfold CSS | Demo Studio | Mozilla Developer Network

単なるデザインじゃなくてこの折りたたみ具合などをJavaScriptで変更することもできます。

そんなのを体験できるデモページはこちら。利用しているブラウザでうまく動かない時は素直にFirefoxで試してみてください。

リンク先の「Paperfold CSS」のページには開発者さんのコメントなどが掲載されているのですが、実装にあたってはいろいろたいへんだったみたいです。

blog comments powered by Disqus

2011年アルファブロガー受賞

新着DVD

モバイル

Powered by Movable Type 6.1.2

ブログ内検索

BlogPeople ReviewMe!

このサイトのレビューとか応援コメントを書いてもらえると励みになります。

Affi☆List for Amazon

バナー広告

このブログ記事について

このページは、nagasawaが2012年4月 2日 16:58に書いたブログ記事です。

ひとつ前のブログ記事は「ヤフー、「音声アシスト for Android」公開―音声で路線検索や会話ができる」です。

次のブログ記事は「マンガの集中線みたいな効果を描くjQueryプラグイン「pow.js」」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。