Creating a parallax background effect in Hype

Creating a parallax background effect for your scenes in Hype is not hard.
In the following video you can see how it works:

	
	var objects = document.getElementsByClassName("mouseParallax");
	
	function map(value, low1, high1, low2, high2){
		return low2 + (value - low1) * (high2 - low2) / (high1 - low1)
	};

	function doParallax(e){
		for(var i=0; i<objects.length; i++){
		
			var current = objects[i];
			var currentWidth = current.style.width.slice(0,-2);
			var currentHeight = current.style.height.slice(0,-2);
		
			var parent = current.parentNode.parentNode;
			var parentWidth = parent.style.width.slice(0,-2);
			var parentHeight = parent.style.height.slice(0,-2);
		
			var widthDiff = parentWidth-currentWidth;
			var heightDiff = parentHeight-currentHeight;
			
			var mousePosX = e.pageX;
			var mousePosY = e.pageY;
			
			var newPosX = map(mousePosX,0,window.innerWidth,0,widthDiff);
			var newPosY = map(mousePosY,0,window.innerHeight,0,heightDiff);
			
			hypeDocument.setElementProperty(current, 'left', newPosX);
			hypeDocument.setElementProperty(current, 'top', newPosY);
			
		}
	}
	
	document.addEventListener("mousemove", doParallax);