Skip to content

Instantly share code, notes, and snippets.

@SamWM

SamWM/layeredblockanimation.html

Created June 1, 2012 09:50
Show Gist options
  • Save SamWM/2850842 to your computer and use it in GitHub Desktop.
Save SamWM/2850842 to your computer and use it in GitHub Desktop.
Download ZIP
jQuery Layered Block Animation
Raw
layeredblockanimation.html
<!DOCTYPE html>
<html>
<head>
<style>
#blocks
{
position: relative;
}
#blocks .block {
border: 1px solid #000;
position: absolute;
-moz-box-shadow: 10px 0px 5px #eee;
-webkit-box-shadow: 10px 0px 5px #eee;
box-shadow: 10px 0px 5px #eee;
}
#block1 {
background-color:#bca;
width:200px;
height: 200px;
top: 0;
left: 0;
z-index: 3;
}
#block2 {
background-color:#bcc;
width:150px;
height: 150px;
position: absolute;
top: 25px;
left: 125px;
z-index: 2;
}
#block3 {
background-color:#bbc;
width:120px;
height: 120px;
position: absolute;
top: 40px;
left: 215px;
z-index: 1;
}
button {
font-size:14px;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<p>Click on a block to bring it to the front.</p>
<div id="blocks">
<div id="block1" class="block">Block1</div>
<div id="block2" class="block">Block2</div>
<div id="block3" class="block">Block3</div>
</div>
<script type="text/javascript">
$("#block1").click(function(){
$(this).css({"z-index": 3}).animate({"left": "0", "top": "0", "width": "200px", "height" : "200px"}, 1000);
$("#block2").css({"z-index": 2}).animate({"left": "125px", "top": "25px", "width": "150px", "height" : "150px"}, 1000);
$("#block3").css({"z-index": 1}).animate({"left": "215px", "top": "40px", "width": "120px", "height" : "120px"}, 1000);
});
$("#block2").click(function(){
$(this).css({"z-index": 3}).animate({"left": "0", "top": "0", "width": "200px", "height" : "200px", "rotate": 0}, 1000);
$("#block3").css({"z-index": 2}).animate({"left": "125px", "top": "25px", "width": "150px", "height" : "150px"}, 1000);
$("#block1").css({"z-index": 1}).animate({"left": "215px", "top": "40px", "width": "120px", "height" : "120px"}, 1000);
});
$("#block3").click(function(){
$(this).css({"z-index": 3}).animate({"left": "0", "top": "0", "width": "200px", "height" : "200px"}, 1000);
$("#block1").css({"z-index": 2}).animate({"left": "125px", "top": "25px", "width": "150px", "height" : "150px"}, 1000);
$("#block2").css({"z-index": 1}).animate({"left": "215px", "top": "40px", "width": "120px", "height" : "120px"}, 1000);
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment