ここではThe Sexy Curlsプラグインの紹介をしています。
ダウンロードはこちら
http://elliottkember.com/sexy_curls.html
headで読み込み
<script src="jquery.min.js"></script> <script src="jquery-ui.min.js"></script> <script src="turn.js"></script> <link rel="stylesheet" href="turn.css">
使用するファイル
jquery.min.js
jquery-ui.min.js
turn.js
turn.css
必要な画像
後は削除しても大丈夫です。
script
$(document).ready(function(){ $('#target').fold(); });
html
<img id="target" src="yellow-heart.jpg" />
めくれたときに表示する画像を指定してください。
turn.js
var defaults = { directory: '.', // The directory we're in side: 'left', // change me to "right" if you want rightness turnImage: 'fold.png', // The triangle-shaped fold image maxHeight: 400, // The maximum height. Duh. startingWidth: 80, // The height and width startingHeight: 80, // with which to start (these should probably be camelCase, d'oh.) autoCurl: false // If this is set to true, the fold will curl/uncurl on mouseover/mouseout. };
デフォルトではこのようになっていますので左上がめくれる設定になっています。
右上をめくれるようにする
var defaults = { directory: '.', // The directory we're in side: 'right', // change me to "right" if you want rightness turnImage: 'fold-sw.png', // The triangle-shaped fold image maxHeight: 400, // The maximum height. Duh. startingWidth: 80, // The height and width startingHeight: 80, // with which to start (these should probably be camelCase, d'oh.) autoCurl: false // If this is set to true, the fold will curl/uncurl on mouseover/mouseout. };
めくる最初の位置とめくれる位置はmaxHeight、startingWidth、startingHeightのパラメータで決定してください。