breathTAKING/index.html at main · LovesPictures/breathTAKING · GitHub

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!doctype html>
<html lang="en">

<head>
	<meta name="viewport" content="width = 1050, user-scalable = no" />
	<script type="text/javascript" src="./extras/jquery.min.js"></script>
	<script type="text/javascript" src="./lib/turn5.min.js"></script>

</head>

<body>

	<div class="flipbook-viewport">
		<div class="container">
			<div class="flipbook">
				<div style="background-image:url('pages/1.jpg')"></div>
				<div style="background-image:url('pages/2.jpg')"></div>
				<div style="background-image:url('pages/3.jpg')"></div>
				<div style="background-image:url('pages/4.jpg')"></div>
				<div style="background-image:url('pages/5.jpg')"></div>
				<div style="background-image:url('pages/6.jpg')"></div>
				<div style="background-image:url('pages/7.jpg')"></div>
				<div style="background-image:url('pages/8.jpg')"></div>
				<div style="background-image:url('pages/9.jpg')"></div>
				<div style="background-image:url('pages/10.jpg')"></div>
				<div style="background-image:url('pages/11.jpg')"></div>
				<div style="background-image:url('pages/12.jpg')"></div>
				<div style="background-image:url('pages/13.jpg')"></div>
				<div style="background-image:url('pages/14.jpg')"></div>
				<div style="background-image:url('pages/15.jpg')"></div>
				<div style="background-image:url('pages/16.jpg')"></div>
			</div>
		</div>
	</div>
	<!-- overall sizing -->
	<script type="text/javascript">
		turn = new TurnJS('.flipbook', {
			// Width
			width: 1200,
			// Height
			height: 900,
			// Elevation
			elevation: 80,
			// Enable gradients
			gradients: true,
			// Auto center this flipbook
			autoCenter: true
		});
	</script>

	<style>
		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;
		}

		/* starting postition */
		.flipbook-viewport .flipbook {
			width: 500px;
			height: 1500px;
			left: -650px;
			/*left margine*/
			/* adjust to centre on on the screen */
			top: -450px;
			/* adjust from the top */
		}

		.flipbook-viewport .page {
			/* width: 700px;
			height: 1500px; */
			background-color: white;
			background-repeat: no-repeat;
			background-size: 100% 100%;
		}

		.flipbook .page {
			box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
		}

		.flipbook-viewport .page img {
			user-select: none;
			margin: 0;
		}

		.flipbook-viewport .shadow {
			transition: box-shadow 0.5s;
			box-shadow: 0 0 20px #ccc;
		}
	</style>


</body>

</html>