The Sexy Curls jQuery Plugin by Elliott Kember

サイトに驚き！のページめくり効果をつけられるjQueryプラグイン。
実装すると、次のように、ページの右上にめくれそうな部分が現れます。



ぺらーんと、めくっていくと画像が見えてしまうという驚きのＵＩが実現可能です



実装方法は簡単です。

1. まず必要なソースを読み込み

<script type="text/javascript" src="turn/jquery1.3min.js"></script>
<script type="text/javascript" src="turn/jqueryui.js"></script>
<script type="text/javascript" src="turn/turn.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $( '#target' ).fold({side: 'right'});
});
</script>
<link rel="stylesheet" type="text/css" href="turn/turn.css">

2. めくったときに表示する画像のマークアップ定義

<img id="target" src="turn/code.png">

3. 2のマークアップに対して以下のJSコードを実行

$(document).ready(function(){
    $( '#target' ).fold();
});

訪問者、そしてクライアントをあっと驚かせるテクニックとして覚えておいて良さそうですね。

関連エントリ

• コンテンツを滑らかにスライドさせるjQueryプラグイン
• jQueryをナイスにナビゲーションに活用したサイト集
• 便利なjQueryプラグインいろいろ