" Book"
Bootstrap 4.1.1 Snippet by VikasChaurasia264

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<html>
<head>
<title>Book 84ya</title>
</head>
<body>
<section>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class='book'>
<div id='page-1' class='page no-anim'>
<div class='side-1' id='p1'>
<div class='content'>
<h1>Flip Book Experiment</h1>
<h3>By Usman Nasir</h3>
</div><!-- .content -->
</div><!-- .side-1 -->
<div class='side-2' id='p2'>
<div class='content'>
<div id="earth"></div>
</div><!-- .content -->
</div><!-- .side-2 -->
</div><!-- .page -->
<div id='page-2' class='page no-anim'>
<div class='side-1' id='p3'>
<div class='content'>
</div><!-- .content -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
*, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
position: relative;
}
html, body {
height: 100%;
}
::-webkit-scrollbar {width:12px}
::-webkit-scrollbar-thumb {background: #222;}
::-webkit-scrollbar-track {background: transparent}
::selection {
background: #222;
color: white;
}
::-moz-selection {
background: #222;
color: white;
}
body * {
transform-style: preserve-3d; /* am i doing this wrong? */
}
body {
background:#d2e4f4;
color: #222;
font-family: 'Gabriela', serif;
perspective: 70em;/*in your face*/
}
section{
position:relative;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// http://stackoverflow.com/a/23371115/604040
$('.page').click(function() {
$(this).removeClass('no-anim').toggleClass('flipped');
$('.page > div').click(function(e) {
e.stopPropagation();
});
reorder()
});
function reorder(){
$(".book").each(function(){
var pages=$(this).find(".page")
var pages_flipped=$(this).find(".flipped")
pages.each(function(i){
$(this).css("z-index",pages.length-i)
})
pages_flipped.each(function(i){
$(this).css("z-index",i+1)
})
});
}
reorder()
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Dashboard

Questions / Comments: