JSFiddle - React, Tailwind, and code Playground

by Danilo Sousa

HTML

<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/js/zlayer.js"></script>
<div id="container">
		  <img src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/img/temp.jpg" class="background" />
        <img src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/img/buda.png" class="guy" />
        <img src="http://www.devinrolsen.com/wp-content/themes/dolsen/demos/jquery/zlayer/img/buda2.png" class="guys" />               
    </div>

CSS

#container {width:1024px; margin:auto; overflow:hidden; border:1px #000 solid; position:relative; height:1050px;}
.background,.guy,.guys {position:absolute;}
.background {z-index:1; margin-left:-290px;}
.guy {z-index:4; margin-left:-305px;}
.guys {z-index:2; margin-left:-329px; margin-top:200px;}
p {
	margin: auto;
	display: block;
	width: 650px;
	font-weight: bold;
	text-align: center;
}

JavaScript

$(document).ready(function(){
	$('#container').zlayer([
		{
			layer:'.background',
			mass:15,
			confine:'y'
		},
		{
			layer:'.guy',
			mass:8,
			force:'push'
		},
		{
			layer:'.guys',
			mass:10,
			force:'pull'
		}
	],{
		repositionTransition:'all .5s ease-in'
	});		  	  
});