Javascript 
Background Effects Clouds Background Animation
Background Effects Clouds Background Animation Background Effects Clouds Background Animation Hi, in this tutorial i will show you a vezy sexy background animation. It's about clouds animation and a slide horizontally container. You have a menu with 4 buttons, when you call one the button, the content of the page slide by horizontal.
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/tut.css">
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('a.link').click(function () {
$('#wrapper').scrollTo($(this).attr('href'), 800);
setPosition($(this).attr('href'), '#cloud1', '0px', '400px', '800px', '1200px')
setPosition($(this).attr('href'), '#cloud2', '0px', '800px', '1600px', '2400px')
$('a.link').removeClass('selected');
$(this).addClass('selected');
return false;
});
});
function setPosition(check, div, p1, p2, p3, p4) {
if(check==='#box1')
{
$(div).scrollTo(p1, 800);
}
else if(check==='#box2')
{
$(div).scrollTo(p2, 800);
}
else if(check==='#box3')
{
$(div).scrollTo(p3, 800);
}
else
{
$(div).scrollTo(p4, 800);
}
};
</script>
<body>
<div id="cloud1" class="clouds">
<div id="clouds-small"></div>
</div><!-- end clouds -->
<div id="cloud2" class="clouds">
<div id="clouds-big"></div>
</div><!-- end clouds -->
<div id="header">
<h1 id="logo">Scrolling Clouds</h1>
<ul id="menu">
<li><a href="#box1" class="link">Home</a></li>
<li><a href="#box2" class="link">Box 2</a></li>
<li><a href="#box3" class="link">Box 3</a></li>
<li><a href="#box4" class="link">Box 4</a></li>
</ul>
</div><!-- end header -->
<div id="wrapper">
<ul id="mask">
<li id="box1" class="box">
<a name="box1"></a>
<div class="content"><div class="inner">Home Box</div></div>
</li><!-- end box1 -->
<li id="box2" class="box">
<a name="box2"></a>
<div class="content"><div class="inner">Box 2</div></div>
</li><!-- end box2 -->
<li id="box3" class="box">
<a name="box3"></a>
<div class="content"><div class="inner">Box 3</div></div>
</li><!-- end box3 -->
<li id="box4" class="box">
<a name="box4"></a>
<div class="content"><div class="inner">Box 4</div></div>
</li><!-- end box4 -->
</ul><!-- end mask -->
</div><!-- end wrapper -->
</body>
html { background:#67b2ff; font-family:Arial, Helvetica, sans-serif; }
/*** Clouds ***/
.clouds { width:100%; height:262px; overflow:hidden; }
#clouds-small { width:3000px; height:100%; background:url(../images/bg-clouds-small.png) repeat-x;}
#cloud2 { position:relative; top:-262px; }
#clouds-big { width:4000px; height:100%; background:url(../images/bg-clouds-big.png) repeat-x;}
/*** Header ***/
h1#logo { background:url(../images/Logo.png) top left no-repeat; height:62px; width:481px;
text-indent:-9999px; position:absolute; top:10px; left:10px; }
#menu { float:right; position:absolute; top:20px; right:10px; z-index:10; }
#menu a { background:#FFF; color:#67b2ff; border:#AAA 3px solid; text-decoration:none; padding:10px;
margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; outline:none;}
#menu a:hover { background:#67b2ff; color:#FFF; border:#FFF 3px solid; text-decoration:none; padding:10px;
margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
#menu a.selected { background:#AAA; color:#FFF; border:#67b2ff 3px solid; text-decoration:none; padding:10px;
margin-right:10px; border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px;}
#menu li { float:left; }
/*** Body Content ***/
#wrapper { width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; }
#mask { width:400%; height:100%; }
.box { width:25%; height:100%; float:left; }
.content { width:960px; height:400px; top:20%; margin: 0 auto; position:relative; background:rgba(255,255,255, 0.3);
border-radius:35px; -moz-border-radius:35px; -webkit-border-radius:35px; }
.inner { width:920px; height:360px; background:rgba(255, 255, 255, 0.3); border-radius:30px; -moz-border-radius:30px;
-webkit-border-radius:30px; margin:5px; padding:15px; top:5px; position:relative; }
This script has been developed by http://blog.themeforest.net !
