jQuery zLayer

What is zLayer?

zLayers is a jQuery plugin from Devin R. Olsen.  It that allows you to orientate an element based on the position of your mouse to the page’s window.
This plugin is perfect for interactive illustrations through a parallax effect. zLayer is easy to use and implement.

CSS style

<style type="text/css">
/* Example One */
#bfContainer{
	width:594px;
	margin:auto;
	overflow:hidden;
	border:1px #000 solid;
	position:relative;
	height:520px;
}
.zlayer{
	position:absolute;
	top:0;
}
.background{
	z-index:1;
	margin-left:-55px;
}
.bfLogo{
	z-index:5;
	margin-left:20px;
}
.manOne{
	z-index:4;
	margin-left:-230px;
}
.manTwo{
	z-index:3;
	margin-left:-195px;
	margin-top:50px;
}
.manThree{
	z-index:2;
	margin-left:-195px;
	margin-top:64px;
} 
.manFour{
	z-index:1;
	margin-left:-255px;
	margin-top:55px;
} 	

/* Example Two */
#jackContainer{
	width:594px;
	margin:auto;
	overflow:hidden;
	border:1px #000 solid;
	position:relative;
	height:512px;
}
.jackBackground{
	z-index:1;
	margin-left:-354px;
}
.human{
	z-index:5;
	margin-left:-307px;
	margin-top:-180px !important;
}
.branch{
	z-index:4;
	margin-left:-350px;
	margin-top:-300px !important;
}
.tree{
	z-index:3;
	margin-left:-405px;
	margin-top:-180px !important;
}
.fence-post{
	z-index:3;
	margin-left:-350px;
	margin-top:-175px !important;
}
.Jzlayer{
	position:absolute;
	margin-top:-188px;
}
</style>

Javascript

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.zlayer.min.js"></script>

jQuery

<script type="text/javascript">
$(document).ready(function(){
	$('#bfContainer .background').zlayer({mass:15,confine:'y',canvas:'#bfContainer'});
	$('#bfContainer .manOne').zlayer({mass:6,force:'push',canvas:'#bfContainer',confine:'y'});
	$('#bfContainer .manTwo').zlayer({mass:8,force:'push',canvas:'#bfContainer',confine:'y'});	 
	$('#bfContainer .manThree').zlayer({mass:10,force:'push',canvas:'#bfContainer',confine:'y'});
	$('#bfContainer .manFour').zlayer({mass:11,force:'push',canvas:'#bfContainer',confine:'y'});	
	$('#bfContainer .bfLogo').zlayer({mass:15,force:'pull',canvas:'#bfContainer',confine:'y'});	

	$('.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'});
});
</script>

HTML markup

<div id="bfContainer">
    <img src="img/jquery-zlayer-11.jpg" class="background zlayer" /><br />
    <img src="img/jquery-zlayer-12.png" class="manOne zlayer" /><br />
    <img src="img/jquery-zlayer-13.png" class="manTwo zlayer" /><br />
    <img src="img/jquery-zlayer-14.png" class="manThree zlayer" /><br />
    <img src="img/jquery-zlayer-15.png" class="manFour zlayer" /><br />
    <img src="img/jquery-zlayer-16.png" class="bfLogo zlayer" />
</div>

<div id="jackContainer">
    <img src="img/jquery-zlayer-21.jpg" class="jackBackground Jzlayer" />
    <img src="img/jquery-zlayer-22.png" class="branch Jzlayer" />
    <img src="img/jquery-zlayer-23.png" class="human Jzlayer" />
    <img src="img/jquery-zlayer-24.png" class="tree Jzlayer" />
    <img src="img/jquery-zlayer-25.png" class="fence-post Jzlayer" />                
</div>

Demo »


Go Daddy


Related articles

Vecteezy - Free Vector Art

Vecteezy - Free Vector Art

05/08/2016

If you need Free Vector Art do not hesitate: visit Vecteezy.com

Free vector icons

Free vector icons

31/01/2016

Want to have some vector icons, free? Try this nice website.

Beautiful free stock photos from StockSnap

Beautiful free stock photos from StockSnap

11/12/2015

Would you like some cool stock photos for free? Check out this article, and try this website.


1 comment

G2013-02-09 12:16

Nice

Leave a comment

We welcome any comment from you! Please keep in mind that comments are moderated and rel='nofollow' is in use. So, please do not use a domain as your name or a spammy keyword, or your comment will be deleted.

Name: *

E-mail: *

Message: *

Click on the flower *


Find us on Facebook

Tags

Get online with the world's Best - GoDaddy.com!

Back to Top