PFold: Paper-Like Unfolding Effect

折りたたんだ紙を開いているようなアニメーションを見せることが出来るのが、このjQueryプラグイン「PFold」です。

サンプルページを作ってみました。

→ 折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル

見た頂いたらわかると思いますが、立体的に紙が開いてコンテンツを表示します。
(残念ながら、IE8などCSS3に対応していない古いブラウザでは動作しません。)

オプション設定によっては色々な動きができますが、ここでは基本なものを説明します。


【使用方法】
まずはこちらのサイトから、jsファイルを含む一式をダウンロードします。

<head>部分にcssとJavaScriptを設定します。

そして<body>部に以下のようにコンテンツを記述すれば完成です。

うまくスペースを利用して表示させると効果的に演出できるのではないでしょうか?

本家には他のパターンのデモも紹介されています。

最後にサンプルのソースを書いておきます。どうぞご参考まで。

この記事と関連してると思われる記事: