Parallax

parallax.js

			var cOutput = document.getElementById('wrap');
			var w = cOutput.offsetWidth; 
			var h = cOutput.offsetHeight;
			var renderer = new PIXI.WebGLRenderer(w, h);
			cOutput.appendChild(renderer.view);

			var stage = new PIXI.Container();
			var container = new PIXI.Container();
			var foreground = new PIXI.Container();
			stage.addChild(container);
			stage.addChild(foreground);

			var viewWidth = (renderer.width / renderer.resolution);
			var viewHeight = (renderer.height / renderer.resolution);

			var f;
			var fg;
			var mousex = w/2, mousey = h/2;
			var ploader = new PIXI.loaders.Loader();

			function init(){
				ploader.add('fg', 'imagens/bgs/bg_the_exploration.jpg'); //insert Orignal 2d Image Here
				ploader.add('depth', 'imagens/bgs/bg_the_exploration_depth.jpg'); //insert Depth Map Here

				ploader.once('complete', startMagic);

				// Begin loading -
				ploader.load();
			}

			function startMagic() {
				fg = new PIXI.Sprite(ploader.resources.fg.texture);

				stage.scale.x = viewWidth / fg.width;
				stage.scale.y = stage.scale.x;
			
				foreground.addChild(fg);
		  
				d = new PIXI.Sprite(ploader.resources.depth.texture);
				f = new PIXI.filters.DisplacementFilter(d, 0);
			
				fg.filters = [f];  
				
				window.onmousemove = function(e) {			  
					mousex = e.clientX;
					mousey = e.clientY;
				};
			
				animate();
			
			}

			function animate() {
				f.scale.x = (window.innerWidth/2 - mousex) / 79;
				f.scale.y = (window.innerHeight/2 - mousey) / 79;
				fg.addChild(d);
				d.renderable=false;
			   
				renderer.render(stage);       
				requestAnimationFrame(animate);
			}

			// Start -
			init();