zLayer with Images and Touch Events

Original zLayer plugin by Devin Olsen. http://www.devinrolsen.com/jquery-zlayers-parallax-plugin/

by ozzon91

HTML

<div id="jackContainer">
    <img alt="" src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/img/pumpkinbg.jpg" class="jackBackground zlayer" />
    <img alt="" src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/img/branchone.png" class="branch zlayer" />
    <img alt="" src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/img/human.png" class="human zlayer" />
    <img alt="" src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/img/tree.png" class="tree zlayer" />
    <img alt="" src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/img/fencepostright.png" class="fence-post zlayer" />
</div>

CSS

body {
    background-color: black;
}

#jackContainer {
    border: 1px solid #000000;
    height: 512px;
    margin: auto;
    overflow: hidden;
    position: relative;
    width: 594px;
}

.zlayer {
    position: absolute;
}

.jackBackground {
    left: 112px;
    margin-left: -354px;
    margin-top: -188px;
    top: -31px;
    z-index: 1;
}

.branch {
    left: 270px;
    margin-left: -350px;
    margin-top: -300px;
    top: -194px;
    z-index: 4;
}

.human {
    left: 214px;
    margin-left: -307px;
    margin-top: -180px;
    top: -48px;
    z-index: 5;
}

.tree {
    left: 113px;
    margin-left: -405px;
    margin-top: -180px;
    top: -35px;
    z-index: 3;
}

.fence-post {
    left: 185px;
    margin-left: -350px;
    margin-top: -175px;
    top: -44px;
    z-index: 3;
}

JavaScript

$(document).ready(function(){
    $('.jackBackground').zlayer({mass:3.5,canvas:'#jackContainer'});
    $('.branch').zlayer({mass:2,canvas:'#jackContainer'});
    $('.human').zlayer({mass:2.5,canvas:'#jackContainer'});                
    $('.tree').zlayer({mass:3,canvas:'#jackContainer'});    
    $('.fence-post').zlayer({mass:2.5,canvas:'#jackContainer'});
});

/**
* jQuery.zLayer.full v0.2 plugin
* Copyright (c) 2010 Devin R. Olsen
* Date: 12/10/2010
*
* Project Home:
* http://www.devinrolsen.com/jquery-zlayers-plugin/
*/
$.fn.extend({   
    zlayer: function(options) {  
    var defaults = {  
     canvas: document,
     confine:'',
     force:'push',
     mass:10
    }    
        var options =  $.extend(defaults, options);
        var o = options;   
        var obj = $(this);//OBJECT
        var m = o.mass; //MASS VALUE
        var c = o.confine; //CONFINED VALUE    
    
        return this.each(function() {         
            $(o.canvas).bind({
                mousemove: function(e) {
                    pointerMove(e);
                },
                touchmove: function(e) {
                    e = e.originalEvent;
                    e.preventDefault();
                    if (withinContainer($(this), e)) {
                        pointerMove(e);
                    }
                }
            });
        });
        
        function withinContainer(container, e) {
            var x = e.pageX,
                y = e.pageY,
                position = container.offset(),
                minX = position.left,
                minY = position.top,
                maxX = minX + container.width(),
                maxY = minY + container.height();
            
            if ( (x >= minX && x <= maxX) && (y >= minY && y <= maxY) ) {
                return true;
            }
            else {
                return false;
            }
        }
        
        function pointerMove(e) {
            // OBJECT UNDER OFFSET
            var elm =...