This plugin uses the Kinect for Windows technology, you need one xBox Kinect camera, and to install the drivers.
Then you're ready to start a new project using Kinect for Windows.
This project is any HTML5 application using JavaScript libraries.
This plugin is based on Stephband jParallax great stuff, thanks a lot to him !
- Modernizr, especially the CSS3 features detection
- jQuery, that you allready know
- Zigfu, a JS ZDK for Kinect for Windows
- Some transparent images to display as parallax layers
===
Once you've started your HTML5 application, by instance with the HTML5 BoilerPlate snippet, define your viewport and layers elements in your HTML template, then just include the Kinect-Parallax jQuery plugin that you can find in the assets/js/vendors folder of this project.
Your layers need to be horizontaly and verticaly centered, or your parallax effect will not make sense. They need to have a pixels-fixed width and height too. Then you can position the image of these layers as you want, by instance in any absolute position !
The depth of your layer is managed by their z-index CSS property, related to the 'axisZ' plugin option value. A layer with a z-index initied to 1 will stay in the background, and a layer with a z-index equal to this 'axisZ' value will be the "closest". Feel free to change the z-index to make your layers move faster, or slower.
<!DOCTYPE html>
<head>
<meta charset='utf-8'>
<title>Kinect-Parallax</title>
<link rel='stylesheet' media='screen' href='assets/css/jquery.kinect-parallax.min.css' />
<script src='assets/js/vendor/modernizr-2.6.2.min.js'></script>
</head>
<body>
<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'>
</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>
</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.kinect-parallax.js'></script>
<script src='assets/js/vendor/zigfu.min.js'></script>
<script>
$(document).on('ready', function() {
var $viewport = $('#kinect-parallax'),
$layers = $('#kinect-parallax .kinect-parallax-layer').KinectParallax('init', {
'viewport': $viewport, // viewport element, body by default
'axisXAllowed': true, // allow layers to move on X-axis
'axisYAllowed': true, // allow layers to move on Y-axis
'axisZAllowed': true, // allow layers be scaled depending of the Z-axis
'scaling': {
'min': 0.80, // min value for scale() CSS3 transform, if allowed
'max': 1.20 // max value for scale() CSS3 transform, if allowed
},
'axisZ': 100 // Base of your depth, it means that a layer with a z-index to 100 is the closest possible.
}),
initialPosition = {
'x': null,
'y': null,
'z': null
},
engager = zig.EngageUsersWithSkeleton(1);
// Bind kinect events and trigger KinectParallax to update the layers
engager.addEventListener('userengaged', function(user) {
// Engage the first user with start method.
$layers.KinectParallax('start', {
x: user.skeleton[zig.Joint.Head].position[0],
y: user.skeleton[zig.Joint.Head].position[1],
z: user.skeleton[zig.Joint.Head].position[2]
});
// Focus on this user until he's lost.
user.addEventListener('userupdate', function (user) {
// Call the update method with the coordinates to move the layers
$layers.KinectParallax('move', {
x: user.skeleton[zig.Joint.Head].position[0],
y: user.skeleton[zig.Joint.Head].position[1],
z: user.skeleton[zig.Joint.Head].position[2]
});
});
});
// Stop the layers when the engaged user is lost.
engager.addEventListener('userdisengaged', function (user) {
$layers.KinectParallax('stop');
});
});
</script>
</body>
</html>