ページめくりを表現するJavaScriptライブラリ「The Sexy Curls jQuery Plugin」 JavaScript Library Archive

ページめくりを表現するJavaScriptライブラリ「The Sexy Curls jQuery Plugin」

Check Tweet

配布元：The Sexy Curls jQuery Plugin!
ライセンス：MIT license.

The Sexy Curls jQuery PluginはWEBページにページめくりの効果を追加するJavaScriptライブラリです。

利用方法

配布元よりダウンロードしたファイル群をhead要素などで読み込みます。
ファイル群にはjQueryとjQuery UI、turn.jsとturn.cssが含まれています。

<script type="text/javascript" src="jquery1.3min.js"></script>
<script type="text/javascript" src="jqueryui.js"></script>
<script type="text/javascript" src="turn.js"></script>
<link type="text/css" rel="stylesheet" href="turn.css" />

ページめくり時に表示したい画像をimg要素でbody要素内の適当な位置に配置します。img要素には任意のID属性を振っておいてください。

<img id="target" src="curl.jpg" alt="" />

ページめくりの記述はscript要素で記述します。$()内にはimg要素で指定したIDを設定します。

<script type="text/javascript">
$(document).ready(function(){
	$( '#target' ).fold();
});
</script>

サンプル

非常にインパクトのあるライブラリですのでサイトのアクセントによいですね。

スポンサードリンク

コメント

カテゴリー：jQuery ライブラリ 表示

直前:非常にきれいなアラートを表示する「jQuery Alert Dialogs」

直後:スタイルシートを切り替える「styleswitcher.js」