/
index.html
135 lines (134 loc) · 4.99 KB
/
index.html
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<!--[if lt IE 7]> <html class='no-js lt-ie9 lt-ie8 lt-ie7'> <![endif]-->
<!--[if IE 7]> <html class='no-js lt-ie9 lt-ie8'> <![endif]-->
<!--[if IE 8]> <html class='no-js lt-ie9'> <![endif]-->
<!--[if gt IE 8]><!--> <html class='no-js'> <!--<![endif]-->
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='keywords' content='Kinect, Parallax, JavaScript, xBox Kinect, Kinect for windows'>
<meta name='description' content='A JavaScript parallax effect prototype based on Kinect events, using Zigfu library.'>
<meta name='author' content='Florent SCHILDKNECHT'>
<meta name='viewport' content='width=device-width'>
<title>Kinect Parallax Prototype</title>
<link rel='stylesheet' href='assets/css/normalize.css'>
<link rel='stylesheet' href='assets/css/jquery-ui-1.10.2.cupertino.min.css'>
<link rel='stylesheet' href='assets/css/jquery.kinect-parallax.min.css'>
<link rel='stylesheet' href='assets/css/app.min.css'>
<script src='assets/js/vendor/modernizr-2.6.2.min.js'></script>
</head>
<body>
<header id='app-header'>
<h1 id='app-name'>Kinect-based Parallax Prototype</h1>
<h4 id='app-user'></h4>
</header>
<!-- #kinect-parallax is our viewport -->
<section id='kinect-parallax' class='kinect-parallax-viewport'>
<!-- .kinect-parallax-laery are our layers, just set them a width, a height, and a z-index ! -->
<div id='kinect-parallax-layer-1' class='kinect-parallax-layer'>
<img src='assets/images/layers/layer-1bis.png' alt='Front'>
<img id='car' data-offset-left='560' src='assets/images/layers/layer-2bis.png' alt='Car'>
</div>
<div id='kinect-parallax-layer-2' class='kinect-parallax-layer'>
<img src='assets/images/layers/layer-3bis.png' alt='Left moutains'>
</div>
<div id='kinect-parallax-layer-3' class='kinect-parallax-layer'>
<img src='assets/images/layers/layer-4bis.png' alt='Right moutains'>
</div>
<div id='kinect-parallax-layer-4' class='kinect-parallax-layer'>
<img src='assets/images/layers/layer-5bis.png' alt='Background moutains'>
</div>
<div id='kinect-parallax-layer-5' class='kinect-parallax-layer'>
<img src='assets/images/layers/layer-6bis.png' alt='Sky and sun'>
</div>
<!--
<div id='kinect-parallax-layer-7' class='kinect-parallax-layer animated-layer'>
<canvas class='bird' id='bird-1'></canvas>
</div>
-->
<div class='cursor' id='cursor'></div>
</section>
<section id='debug'>
<table>
<caption>DEBUG - Head Position</caption>
<thead>
<tr>
<th>X</th>
<th>Y</th>
<th>Z</th>
</tr>
</thead>
<tbody>
<tr>
<td id='head-x'>0</td>
<td id='head-y'>0</td>
<td id='head-z'>0</td>
</tr>
</tbody>
</table>
</section>
<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>window.jQuery || document.write('<script src=\'assets/js/vendor/jquery-1.9.1.min.js\'><\/script>')</script>
<script src='assets/js/vendor/jquery-ui-1.10.2.cupertino.min.js'></script>
<script src='assets/js/vendor/jquery.transit-0.9.9.min.js'></script>
<script src='assets/js/vendor/jquery.jCanvas-13.03.20.min.js'></script>
<script src='assets/js/vendor/jquery.kinect-parallax.js'></script>
<script src='assets/js/vendor/spin-1.3.0.min.js'></script>
<script src='assets/js/vendor/buzz-1.0.6.min.js'></script>
<script src='assets/js/vendor/polygon.js'></script>
<script src='assets/js/plugins.js'></script>
<script src='assets/js/vendor/zigfu.min.js'></script>
<script src='assets/js/app.js'></script>
<script>
(function ($) {
$(document).on('ready', function() {
var $viewport = $('#kinect-parallax'),
$layers = $('#kinect-parallax .kinect-parallax-layer').KinectParallax('init', {
'viewport': $viewport,
'axisXAllowed': true,
'axisYAllowed': true,
'axisZAllowed': true,
'scaling': {
'min': 0.80,
'max': 1.20
},
'axisZ': 100
}),
initialPosition = {
'x': null,
'y': null,
'z': null
};
$(this).on('headstart', function (e, position) {
if (Array.isArray(position)) {
initialPosition = {
'x': position[0],
'y': position[1],
'z': position[2]
}
} else {
initialPosition = {
'x': position.x,
'y': position.y,
'z': position.z
}
}
$layers.KinectParallax('start', initialPosition);
});
$(this).on('headstop', function (e) {
$layers.KinectParallax('stop');
});
$(this).on('headmove', function (e, position) {
$layers.KinectParallax('move', position);
});
$(this).on('moveoffscalearea', function () {
console.log('TOO FAR');
});
$(this).on('moveonscalearea', function () {
console.log('OKAY');
});
});
})(window.jQuery);
</script>
</body>
</html>