Difference between revisions of "Team:UMaryland/Notebook"

Line 5: Line 5:
 
<style>  
 
<style>  
  
−
.flipbook{
+
/* Basic sample */
−
    width: 800px;
+
 
−
    height: 400px;
+
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{
−
width:400px;
+
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.2);
−
height:600px;
+
-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 id="flipbook">
+
<div class="container">
−
<div class="hard"> Turn.js </div>
+
<div class="flipbook">
−
<div class="hard"></div>
+
<div style="background-image:url(https://static.igem.org/mediawiki/2015/e/ea/Notebook1.png)"></div>
−
<div> Page 1 </div>
+
<div style="background-image:url(https://static.igem.org/mediawiki/2015/b/bd/Notebook2.png)"></div>
−
<div> Page 2 </div>
+
</div>
−
<div> Page 3 </div>
+
</div>
−
<div> Page 4 </div>
+
−
<div class="hard"></div>
+
−
<div class="hard"></div>
+
 
</div>
 
</div>
 +
  
 
<script type="text/javascript">
 
<script type="text/javascript">
−
$("#flipbook").turn({
+
$('.flipbook').turn({
−
width: 400,
+
// Width
−
height: 300,
+
 
−
autoCenter: true
+
width:922,
 +
 +
// Height
 +
 
 +
height:600,
 +
 
 +
// Elevation
 +
 
 +
elevation: 50,
 +
 +
// Enable gradients
 +
 
 +
gradients: true,
 +
 +
// Auto center this flipbook
 +
 
 +
autoCenter: true
 +
 
 
});
 
});
 
</script>  
 
</script>  
  
−
<script src = "JS/turn.min.js"> </script>
 
  
 
</body>  
 
</body>  

Revision as of 17:02, 3 August 2015