Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
executable file 109 lines (92 sloc) 3.94 KB
<!DOCTYPE html>
<html lang="en">
<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>PFold: Paper-Like Unfolding Effect</title>
<meta name="description" content="PFold: Paper-Like Unfolding Effect" />
<meta name="keywords" content="css3, experiment, 3d, unfolding, fold, paper, component, element, web design, jquery, plugin, perspective" />
<meta name="author" content="Codrops" />
<link rel="shortcut icon" href="../favicon.ico">
<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]-->
<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: #4e2f1d;
text-shadow: 1px 1px 1px rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div class="container">
<!-- Codrops top bar -->
<div class="codrops-top clearfix">
<a href="http://tympanus.net/Tutorials/CustomLoginFormStyling/">
<strong>&laquo; Previous Demo: </strong>Custom Login Form Styling
</a>
<span class="right">
<a href="http://tympanus.net/codrops/?p=11459">
<strong>Back to the Codrops Article</strong>
</a>
</span>
</div><!--/ Codrops top bar -->
<header>
<h1><strong>PFold:</strong> Paper-Like Unfolding Effect</h1>
<h2>Paper-like unfolding effect experiment</h2>
<nav class="codrops-demos">
<a class="current-demo" href="index.html">Demo 1</a>
<a href="index2.html">Demo 2</a>
<a href="index3.html">Demo 3</a>
</nav>
<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>Dear Allen,</h3>
<p>I just wanted to let you know that you left the garage door open and all the monkeys could get away! Great job! How often did I tell you <span>NOT</span> to forget to close it. On top of all that you also left the gate open and now they are literally in the wild! Anyway, just wated to say <span>THANKS</span> for that!</p><p class="signature">Yours, Barbara</p>
</div>
<span class="close">x</span>
</div>
</div>
<p class="info"><strong>Demo 1:</strong> Three folding steps with the directions left, bottom and right</p>
</section>
</div>
<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>
</html>