Difference between revisions of "Team:UMaryland/Notebook"
Sarahjade712 (Talk | contribs) |
Sarahjade712 (Talk | contribs) |
||
Line 5: | Line 5: | ||
<style> | <style> | ||
− | .flipbook{ | + | /* Basic sample */ |
− | + | ||
− | + | body{ | |
+ | overflow:hidden; | ||
+ | background-color:#fcfcfc; | ||
+ | margin:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | |||
+ | .flipbook-viewport{ | ||
+ | overflow:hidden; | ||
+ | width:100%; | ||
+ | height:100%; | ||
+ | } | ||
+ | |||
+ | .flipbook-viewport .container{ | ||
+ | position:absolute; | ||
+ | top:50%; | ||
+ | left:50%; | ||
+ | margin:auto; | ||
+ | } | ||
+ | |||
+ | .flipbook-viewport .flipbook{ | ||
+ | width:922px; | ||
+ | height:600px; | ||
+ | left:-461px; | ||
+ | top:-300px; | ||
+ | } | ||
+ | |||
+ | .flipbook-viewport .page{ | ||
+ | width:461px; | ||
+ | height:600px; | ||
+ | background-color:white; | ||
+ | background-repeat:no-repeat; | ||
+ | background-size:100% 100%; | ||
} | } | ||
.flipbook .page{ | .flipbook .page{ | ||
− | + | -webkit-box-shadow:0 0 20px rgba(0,0,0,0.2); | |
− | + | -moz-box-shadow:0 0 20px rgba(0,0,0,0.2); | |
+ | -ms-box-shadow:0 0 20px rgba(0,0,0,0.2); | ||
+ | -o-box-shadow:0 0 20px rgba(0,0,0,0.2); | ||
+ | box-shadow:0 0 20px rgba(0,0,0,0.2); | ||
+ | } | ||
+ | |||
+ | .flipbook-viewport .page img{ | ||
+ | -webkit-touch-callout: none; | ||
+ | -webkit-user-select: none; | ||
+ | -khtml-user-select: none; | ||
+ | -moz-user-select: none; | ||
+ | -ms-user-select: none; | ||
+ | user-select: none; | ||
+ | margin:0; | ||
+ | } | ||
+ | |||
+ | .flipbook-viewport .shadow{ | ||
+ | -webkit-transition: -webkit-box-shadow 0.5s; | ||
+ | -moz-transition: -moz-box-shadow 0.5s; | ||
+ | -o-transition: -webkit-box-shadow 0.5s; | ||
+ | -ms-transition: -ms-box-shadow 0.5s; | ||
+ | |||
+ | -webkit-box-shadow:0 0 20px #ccc; | ||
+ | -moz-box-shadow:0 0 20px #ccc; | ||
+ | -o-box-shadow:0 0 20px #ccc; | ||
+ | -ms-box-shadow:0 0 20px #ccc; | ||
+ | box-shadow:0 0 20px #ccc; | ||
} | } | ||
Line 29: | Line 87: | ||
<img src="https://static.igem.org/mediawiki/2015/b/bd/Notebook2.png" style="height:50%; width:50%"> | <img src="https://static.igem.org/mediawiki/2015/b/bd/Notebook2.png" style="height:50%; width:50%"> | ||
− | + | <div class="flipbook-viewport"> | |
− | <div | + | <div class="container"> |
− | <div class=" | + | <div class="flipbook"> |
− | + | <div style="background-image:url(https://static.igem.org/mediawiki/2015/e/ea/Notebook1.png)"></div> | |
− | + | <div style="background-image:url(https://static.igem.org/mediawiki/2015/b/bd/Notebook2.png)"></div> | |
− | + | </div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | |||
<script type="text/javascript"> | <script type="text/javascript"> | ||
− | $( | + | $('.flipbook').turn({ |
− | + | // Width | |
− | + | ||
− | + | width:922, | |
+ | |||
+ | // Height | ||
+ | |||
+ | height:600, | ||
+ | |||
+ | // Elevation | ||
+ | |||
+ | elevation: 50, | ||
+ | |||
+ | // Enable gradients | ||
+ | |||
+ | gradients: true, | ||
+ | |||
+ | // Auto center this flipbook | ||
+ | |||
+ | autoCenter: true | ||
+ | |||
}); | }); | ||
</script> | </script> | ||
− | |||
</body> | </body> |
Revision as of 17:02, 3 August 2015