jQuery 3D Web Page with CSS3 Transitions - Three-D Pages
File Size: | 12KB |
---|---|
Views Total: | 1603 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Three-D Pages is a fancy jQuery plugin that generates blocks of html content that behave a separate pages that you can click to enlarge. Useful for areas of a website where there are lists of content that you want to provide a high level view that can be easily clicked into for further detail.
How to use it:
1. Include jQuery library and jQuery Three-D Pages on the page
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script> <script src="../src/3dPages.min.js"></script>
2. Markup html structure
<div class="threedpages"> <div class="page" id="page1">Some Plain Text Page Content</div> <div class="page" id="page2"><div><h2>HTML Page Content</h2><p>this page contains html content</p></div></div> <div class="page" id="page4"><div><h2>HTML Page Content</h2><p>this page contains html content</p></div></div> <div class="page" id="page5"><div><h2>HTML Page Content</h2><p>this page contains html content</p></div></div> </div>
3. The CSS
html, body, div, iframe, span { margin: 0px; padding: 0px; } .threedpages { width: 900px; height: 700px; margin: 0px auto; } .threedpages > .page { border: 1px solid silver; width: 900px; height: 700px; transition: all 1s; -webkit-transition: all 1s; -moz-transition: all 1s; position: absolute; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-box-shadow: 1px 3px 28px gray, -1px 0px 18px gray; -moz-box-shadow: 1px 3px 28px gray, -1px 0px 18px gray; box-shadow: 1px 3px 28px gray, -1px 0px 18px gray; } .threedpages > .page.inactive { opacity: 0; } .threedpages > .page:hover { box-shadow: 2px 2px 18px gray, -2px -2px 18px black; } button.close { background: #4162a8; border-top: 1px solid #38538c; border-right: 1px solid #1f2d4d; border-bottom: 1px solid #151e33; border-left: 1px solid #1f2d4d; border-radius: 4px; -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; -moz-box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; box-shadow: inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; color: #fff; font: bold 20px/1 "helvetica neue", helvetica, arial, sans-serif; margin-bottom: 10px; padding: 10px 0 12px 0; text-align: center; text-shadow: 0px -1px 1px #1e2d4d; width: 60px; -webkit-background-clip: padding-box; -moz-background-clip: padding-box; margin-right: 6px; margin-top: 3px; float: right; } button.close:hover { -webkit-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; cursor: pointer; } button.close:active { -webkit-box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; -moz-box-shadow: inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111111; box-shadow: inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111111; }
4. Call the plugin with options
<script> $(function() { $('.threedpages').threedPages({ pageSelector : '.page', // The selector to use for each 3D Page pagesPerRow : 3 //The number of pages to show per row }); }); </script>
This awesome jQuery plugin is developed by danielsimons1. For more Advanced Usages, please check the demo page or visit the official website.