. ぱんにゃっとTutorial
ぱんにゃっとTutorial
ぱんにゃっとTutorial

ぱんにゃっとTutorial

PFold: Paper-Like Unfolding Effect

折りたたんだ紙を開いているようなアニメーションを見せることが出来るのが、この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> 123456789101112131415161718192021222324252627 <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>

そして<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> 12345678 <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>

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

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

  • Demo 1: Three folding steps with the directions left, bottom and right
  • Demo 2: Two folding steps with different directions of folding according to the grid position
  • Demo 3: Same as demo 2, item will be centered on its original position

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

<!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> 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 <!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>

Tweet あわせてお読みください
    写真が風に飛ばされるような効果のある画像スライド用jQueryプラグイン「Windy」

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

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

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

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

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

📎📎📎📎📎📎📎📎📎📎