ほりくり@ほりでぃWebクリエーター

要素の右上がめくれるjQuery[Useful Peel Back With jQuery]の使い方

投稿日:2013年10月15日

mekuri

下記サイトよりjsをダウンロードします。
Useful Peel Back With jQuery


headにjsの読み込みと数行のスクリプトを記述します。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="./jquery.peelback.js"></script>	//jsのアップロード先によりパスは任意で

<script>
    $(function() {
      $('body').peelback({
        adImage  : '01.jpg',				//下に隠す画像
        peelImage  : 'peel-image.png',		//めくれる画像
        clickURL : 'http://web.mass-mix.com', //クリック時のリンク先
        smallSize: 50, 						//初期サイズ
        bigSize: 300,						//最大サイズ
        autoAnimate: true 					//自動アニメーション
      });
    });
</script>

これでページ右上にめくれる画像が表示されます。
めくれる画像にマウスオーバーすると最大サイズまでめくれ、下に隠している画像が表示されます。
★サンプル1


めくりを付ける要素を指定する

先ほどはページ右上にめくり画像が表示されましたが
今度は画像をつける要素を指定してみます。

headに記述したスクリプトのbodyの部分を任意のものに変更します。

<script>
    $(function() {
      $('.mekuri').peelback({
        adImage  : '01.jpg',				//下に隠す画像
        peelImage  : 'peel-image.png',		//めくれる画像
        clickURL : 'http://web.mass-mix.com', //クリック時のリンク先
        smallSize: 50, 						//初期サイズ
        bigSize: 300,						//最大サイズ
        autoAnimate: true 					//自動アニメーション
      });
    });
</script>

mekuriというクラスを指定した要素にめくりを付けます。
この際、指定した要素は必ずスタイルのpositionにabsoluteかrelativeを設定してください。

<body>
	<style type="text/css">
		.mekuri{
			position:relative;
			width:300px;
			height:200px;
			background-color:#aaa;
		}
	</style>
	<div>
	</div>
</body>
★サンプル2



要素をマウスオーバーでめくれるようにする

右上のめくり画像をマウスオーバーすることで、めくれるアニメーションが実行されますが
今度は要素そのもののマウスオーバーでめくれるようにします。

この場合、直接jsのソースを編集する必要があります。

『jquery.peelback.js』の104行目の
peelHTML.hover(
となっている部分を下記のように修正します。
$('el').hover(

あまり用途はないかもしれません。。。
デフォルトですとめくり画像をマウスオーバーする必要があるので
初期状態である程度めくられている必要があります。
初期では何も表示したくない場合などに使えると思います。

★サンプル3

参考サイト:skuare.net