折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」

折りたたんだ紙を開いているようなアニメーションを見せることが出来るのが、このjQueryプラグイン「PFold」です。

サンプルページを作ってみました。

→　折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル

見た頂いたらわかると思いますが、立体的に紙が開いてコンテンツを表示します。
（残念ながら、IE8などCSS3に対応していない古いブラウザでは動作しません。）

オプション設定によっては色々な動きができますが、ここでは基本なものを説明します。

【使用方法】
まずはこちらのサイトから、ｊｓファイルを含む一式をダウンロードします。

<head>部分にcssとJavaScriptを設定します。

<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/pfold.css" />
<link rel="stylesheet" type="text/css" href="css/custom1.css" />
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.pfold.js"></script>
		<script type="text/javascript">
			$(function() {

				var $container = $( '#uc-container' ),
					pfold = $( '#uc-container' ).pfold({
						easing : 'ease-in-out',
						folds : 3,
						folddirection : ['left','bottom','right']
					});

				$container.find( 'span.clickme' ).on( 'click', function() {

					pfold.unfold();

				} ).end().find( 'span.close' ).on( 'click', function() {

					pfold.fold();

				} );

			});
		</script>

$(function() {

var $container = $( '#uc-container' ),

pfold = $( '#uc-container' ).pfold({

easing : 'ease-in-out',

folds : 3,

folddirection : ['left','bottom','right']

});

$container.find( 'span.clickme' ).on( 'click', function() {

pfold.unfold();

} ).end().find( 'span.close' ).on( 'click', function() {

pfold.fold();

} );

});

</script>

そして<body>部に以下のようにコンテンツを記述すれば完成です。

<div id="uc-container" class="uc-container">
    <div class="uc-initial-content">
	<span class="clickme">Click me</span>
    </div>
    <div class="uc-final-content">
        <!-- ここには展開後のコンテンツ -->
    </div>
</div>

<span class="clickme">Click me</span>

</div>

</div>

うまくスペースを利用して表示させると効果的に演出できるのではないでしょうか？

本家には他のパターンのデモも紹介されています。

最後にサンプルのソースを書いておきます。どうぞご参考まで。

<!DOCTYPE html>
<html lang="jp">
    <head>
		<meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
		<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>紙を開くような効果のあるjQueryプラグイン「PFold」サンプル　│　ぱんにゃっと/H&Y　Tutorial</title>

        <link rel="stylesheet" type="text/css" href="css/demo.css" />
        <link rel="stylesheet" type="text/css" href="css/pfold.css" />
        <link rel="stylesheet" type="text/css" href="css/custom1.css" />
		<script type="text/javascript" src="js/modernizr.custom.79639.js"></script> 
		<!--[if lte IE 8]><style>.support-note .note-ie{display:block;}</style><![endif]-->
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script type="text/javascript" src="js/jquery.pfold.js"></script>
		<script type="text/javascript">
			$(function() {

				var $container = $( '#uc-container' ),
					pfold = $( '#uc-container' ).pfold({
						easing : 'ease-in-out',
						folds : 3,
						folddirection : ['left','bottom','right']
					});

				$container.find( 'span.clickme' ).on( 'click', function() {

					pfold.unfold();

				} ).end().find( 'span.close' ).on( 'click', function() {

					pfold.fold();

				} );
				
			});
		</script>
		<style>
			body { background: url(images/bg.jpg); }
			.container > header h1 {
			    color: #fff;
			    text-shadow: 1px 1px 1px rgba(0,0,0,0.4);
			}

			.container > header h2,
			p.info  {
			    color: #fff;
			    text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
			}
		</style>
    </head>
    <body>
        <div class="container">
		
			<header>
			
				<h1>折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル</h1>
				<h2>まるで折りたたんだ紙を開いているようにアニメーションします。</h2>
							
				<div class="support-note"><!-- let's check browser support with modernizr -->
					<span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>
					<span class="note-ie">Sorry, only modern browsers.</span>
				</div>
				
			</header>
			
			<section class="main demo-1">
				
				<div id="uc-container" class="uc-container">
					<div class="uc-initial-content">
						<!-- custom content -->
						<span class="clickme">Click me</span>
					</div>
					<div class="uc-final-content">
						<!-- custom content -->
						<div class="scrollwrap">
							<h3>Happy Birthday!</h3>
							<p>お誕生日本当におめでとう。 昨日はおめでとう言えなかったけど、今日のお休みは希望のお休みだよ。二人でお祝いしようと思ってたからちゃんと覚えてるよ。今年一年が良い年となりますように。<p class="signature">From, Yuka</p>
						</div>
						<span class="close">x</span>
					</div>
				</div>
			</section>

		</div>

    </body>
</html>

<!DOCTYPE html>

<head>

<title>紙を開くような効果のあるjQueryプラグイン「PFold」サンプル　│　ぱんにゃっと/H&Y　Tutorial</title>

$(function() {

var $container = $( '#uc-container' ),

pfold = $( '#uc-container' ).pfold({

easing : 'ease-in-out',

folds : 3,

folddirection : ['left','bottom','right']

});

$container.find( 'span.clickme' ).on( 'click', function() {

pfold.unfold();

} ).end().find( 'span.close' ).on( 'click', function() {

pfold.fold();

} );

});

</script>

<style>

body { background: url(images/bg.jpg); }

.container > header h1 {

color: #fff;

text-shadow: 1px 1px 1px rgba(0,0,0,0.4);

}

.container > header h2,

p.info {

color: #fff;

text-shadow: 1px 1px 1px rgba(255,255,255,0.5);

}

</style>

</head>

<body>

<h1>折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル</h1>

<h2>まるで折りたたんだ紙を開いているようにアニメーションします。</h2>

<span class="no-csstransforms3d">CSS 3D transforms are not supported in your browser</span>

<span class="note-ie">Sorry, only modern browsers.</span>

</div>

</header>

<span class="clickme">Click me</span>

</div>

<h3>Happy Birthday!</h3>

<p>お誕生日本当におめでとう。昨日はおめでとう言えなかったけど、今日のお休みは希望のお休みだよ。二人でお祝いしようと思ってたからちゃんと覚えてるよ。今年一年が良い年となりますように。<p class="signature">From, Yuka</p>

</div>

</div>

</section>

</div>

</body>

</html>

あわせてお読みください

風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy　」トップ画像

写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」

Windy – A Plugin for Swift Content Navigation このjQueryプラグイン「Windy」を使用すると、まるで写真やカ…

舞台のカーテンを開けるような効果のアニメーションをjQueryとCSSで再現する

映画や舞台で、ステージのカーテン幕が開いたり閉じたりするのをみたことあると思います。舞台が始まる前や終わった後に、左右に開いたり閉じたりするあのカーテンです。…

Flash風にクールなjQureyメニューナビゲーションを実現する「Nice “Flashy” menu with Jquery」

Flashで作ったようなクールなメニューを実現する「Nice “Flashy” menu with Jquery」

Nice "Flashy" menu with Jquery. jQueryでまるでFlash（フラッシュ）で作ったかのようにアニメーションする動きのあるメニ…

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」

→　折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル

あわせてお読みください

コメントを残すコメントをキャンセル

ぱんにゃっとTutorial

jQueryやWordPress、Webデザインに役立つ情報など

ちょっと楽しいおすすめのサンプル

人気記事ランキング

月額126円(税抜)から！WordPressも使えるクラウド型高速レンタルサーバー

カテゴリー

タグ

折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」

→ 折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル

あわせてお読みください

コメントを残す コメントをキャンセル

→　折りたたんだ紙を開くような効果のあるjQueryプラグイン「PFold」サンプル

コメントを残すコメントをキャンセル