Javascript 
Trend for Web Sites Grungy Random Slide Out
Trend for Web Sites Grungy Random Slide Out Trend for Web Sites Grungy Random Slide Out Hi, in this tutorial you have a web site animation with jQuery. In this example you have a menu example which clik slide easy down and container of the web site comes from the top inclineted, each time diffrent angle.
<link rel="stylesheet" href="style.css" type="text/css" media="screen"/>
<div id="header"></div>
<div id="content">
<div id="home" class="text">
<h1>Amazing grungy slide out stuff</h1>
<p>This is an example of some text!</p>
<p>If anybody looks at a picture by Claude Monet from the point of view of
a Raphael, he will see nothing but a meaningless jargon of wild
paint-strokes. And if anybody looks at a Raphael from the point of view
of a Claude Monet, he will, no doubt...</p>
</div>
<div id="about" class="text" style="display:none;">
<h1>Some amazing about section</h1>
<p>This is an example of some text!</p>
<p>In tone drawing there is not only the shape of the masses to be
considered, but their values--that is, their position in an imagined
scale from dark to light. The relation of the different tones in this
way--the values, as it is called--is an extremely important matter in
painting.</p>
</div>
<div id="search" class="text" style="display:none;">
<h1>Search the world!</h1>
<p>This is an example of some text!</p>
<p><label for="searchinput">Search for:</label><input type="text"/></p>
</div>
<div id="photos" class="text" style="display:none;">
<h1>Some awesome photos</h1>
<p>This is an example of some text!</p>
<p>
<img alt="img" src="img1.png" width="170" height="120"/>
<img alt="img" src="img1.png" width="170" height="120"/>
<img alt="img" src="img1.png" width="170" height="120"/>
</p>
</div>
<div id="contact" class="text" style="display:none;">
<h1>Get in touch</h1>
<p>This is an example of some text!</p>
<p>Some contact details...</p>
</div>
</div>
<ul id="navigation">
<li class="home"><a title="Home">Home</a></li>
<li class="about"><a title="About">About</a></li>
<li class="search"><a title="Search">Search</a></li>
<li class="photos"><a title="Photos">Photos</a></li>
<li class="contact"><a title="Contact">Contact</a></li>
</ul>
<div class="info">
<a class="back" href="">back to Codrops</a>
</div>
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var d=300;
$('#navigation a').each(function(){
var $this = $(this);
var r=Math.floor(Math.random()*41)-20;
$this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
$('#content').css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
$this.stop().animate({
'marginTop':'-70px'
},d+=150);
});
$('#navigation > li').hover(
function () {
var $this = $(this);
$('a',$this).stop().animate({
'marginTop':'-40px'
},200);
},
function () {
var $this = $(this);
$('a',$this).stop().animate({
'marginTop':'-70px'
},200);
}
).click(function(){
var $this = $(this);
var name = this.className;
$('#content').animate({marginTop:-600}, 300,function(){
var $this = $(this);
var r=Math.floor(Math.random()*41)-20;
$this.css({'-moz-transform':'rotate('+r+'deg)','-webkit-transform':'rotate('+r+'deg)','transform':'rotate('+r+'deg)'});
$('#content div').hide();
$('#'+name).show();
$this.animate({marginTop:-200}, 300);
})
});
});
</script>
*{
margin:0;
padding:0;
}
body{
font-family: Cambria, serif;
font-size: 18px;
font-style: normal;
font-weight: normal;
letter-spacing: normal;
line-height: 1.4em;
text-transform:uppercase;
background:transparent url(bgbody.jpg) repeat top left;
}
.info a.back{
position: absolute;
bottom:20px;
left:10px;
text-decoration:none;
color:#603d05;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
}
.info a.back:hover{
color:#000;
}
#header{
position:absolute;
top:0px;
left:0px;
width:180px;
height:395px;
background:transparent url(title.png) no-repeat top left;
}
#content{
width:824px;
height:600px;
margin:-200px auto 0px auto;
background:transparent url(bg.gif) no-repeat bottom left;
}
#content h1{
color:#7F6137;
text-shadow:1px 1px 1px #fff;
}
#content p{
margin:20px;
width:600px;
}
#content .text{
padding:300px 0px 0px 100px;
}
ul#navigation {
position: fixed;
margin: 0px;
padding: 0px;
top: 0px;
right: 200px;
list-style: none;
z-index:999999;
}
ul#navigation li {
display:inline;
float:left;
width:100px;
margin-left:1px;
}
ul#navigation li a {
display: block;
font-weight:bold;
text-shadow:1px 1px 1px #fff;
float:left;
width: 100px;
height: 35px;
color:#603d05;
background:transparent url(item.png) no-repeat bottom right;
text-decoration:none;
text-align:center;
padding-top:80px;
margin-top: -40px;
cursor:pointer;
}
ul#navigation li a:hover{
}
This script has been developed by http://tympanus.net !
