[JS]iPhone, iPad対応、パネルを雑誌のようにぺらっとめくるスクリプト -FlipPage

画像やテキストなどを配置したdiv要素で実装したパネルを雑誌のようにぺらっとめくるjQueryのプラグインを紹介します。

FlipPage
右端がぺらっとしてますが、キャプチャだと分かりにくいですね。

[ad#ad-2]

FlipPageの実装

HTML

画像を配置したdiv要素をdiv要素で内包します。

<div id="exemples">
    <div><img src="img1.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img1.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img2.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img2.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img3.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img3.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img4.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img4.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img5.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img5.jpg" style="margin-left: -250px;" /></div>
    <div><img src="img6.jpg" style="margin-left: 0px;" /></div>
    <div><img src="img6.jpg" style="margin-left: -250px;" /></div>
</div>

外部ファイル

「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして指定します。

<script src="jquery.min.js"></script>
<script src="jquery.flippage.min.js"></script>
<link href="jquery.flippage.css" rel="stylesheet" type="text/css"></link>

ページをめくるエフェクトは透過画像を使用しているので、imgフォルダ内の画像のアップロードを忘れずに。

JavaScript

スクリプトでコンテンツのサイズを指定します。

<script>
    $(document).ready(function(){
        $('#exemples').flippage({
            width: 500,
            height: 333
        });
    });
</script>

[ad#ad-2]

シンプルなテキストだけのデモもあります。

div要素にテキストだけを配置したデモ

HTML

<div id="exemple2">
    <div><h3>Page 1</h3></div>
    <div><h3>Page 2</h3></div>
    <div><h3>Page 3</h3></div>
    <div><h3>Page 4</h3></div>
    <div><h3>Page 5</h3></div>
    <div><h3>Page 6</h3></div>
    <div><h3>Page 7</h3></div>
    <div><h3>Page 8</h3></div>
</div>

JavaScript

<script>
	$(document).ready(function(){
	    $('#exemple2').flippage({
	        width: 300,
	        height: 150
	    });
	});
</script>

FlipPageの対応ブラウザ

対応ブラウザ・デバイスは下記の通りです。

• iPhone/iPad/iPod Touch
• Android
• Firefox3.6+
• Chrome
• IE9 (sans animation) - IE10