最近、FLASHのカタログサイトなんかでページめくりのメタファーを使ってるのを見て、これを普通のHTMLサイトにも使えないかという思いつきで作りました。

turnpage

まず、ページめくりのアニメーションをFlashで作成します。ページめくりは隅に設置したいので、Flashに変数を渡すことで、1つのSWFファイルで左上／右上／右下／左下のどの隅にも対応できるようにしています。また、ページめくりの存在がわかるように、ロード後１回だけ、ぺろっとめくれます。

前後のページへのリンクはMovabletypeでlink要素を書き出して、それをで拾います。link要素のrel属性が"next"なら右上隅、"prev"なら左上隅に絶対配置でdiv要素を追加し、さらにその隅に合わせてSWFファイルをSWFObjectを使用して書き出します。このとき、どの隅にあたるのかを変数として渡してやります。

ちなみに、link要素は

文書と他のリソース（情報資源）との関連性（リンク）を定義
するHTMLタグです。〜W3G-link要素 
<mt:EntryNext>
<link rel="next" href="<$mt:EntryPermalink$>" />
</mt:EntryNext>
<mt:EntryPrevious>
<link rel="prev" href="<$mt:EntryPermalink$>" />
</mt:EntryPrevious>
<script type="text/javascript" src="path_to_swfobject.js"></script>
<script type="text/javascript" src="path_to_turnpage.js"></script>
<script type="text/javascript">
var tp = new TurnPage("path_to_turnpage.swf", "9.0.0", 100, 100);
var params = {
    wmode: "transparent"
};
tp.addParams(params);
tp.useExpressInstall("path_to_expressInstall.swf");
</script>

作成したものはすでにこのブログに反映しています。左上隅は前のエントリー、右上隅は次のエントリーにリンクしています。役に立つかどうかは置いといて・・