in this small example I’ll tell you how to use jQuery Vertical Scroll to create your portfolio or other.
Code Html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="Stylesheet" media="screen" type="text/css" href="css/design.css" />
<title>Depot Webdesigner -</title>
<script type='text/javascript' src='js/jquery.min.js'></script>
<script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.localScroll.defaults.axis = 'y';
$.localScroll();
});
</script>
</head>
<body>
<div id="home">
<div> <img src="images/logo.png" />
<div id="menu">
<ul>
<li class="activemenu"><a href="#home">{ HOME }</a></li>
<div class="contenu"> { Hi, I'm Arbaoui Mehdi. I'm the editor of <a href="http://depotwebdesigner.com" class="sitepreview">{ Depotwebdesigner }</a> and <a href="http://depotwebdesigner.com" class="sitepreview">{ Codamaniacs }</a>,the Site Manager of both <a href="#" class="sitepreview"> { Tutoslinux }</a>, and <a href="#" class="sitepreview"> { Rabbitemplate }</a>. I spend too much time in front of the computer. } </div>
<li class="activemenu"><a href="#box1">{ PORTFOLIO }</a></li>
<li><a href="#box2">{ About }</a></li>
</ul>
</div>
<div align="center"> <img src="images/down.jpg" alt=""/> </div>
</div>
</div>
<div id="container">
<div id="box1" class="box">
<div id="menu">
<ul>
<li class="activemenu"><a href="#home">{ HOME }</a></li>
<li><a href="#box1">{ PORTFOLIO }</a></li>
<div class="contenu"> { Hi, I'm Arbaoui Mehdi. I'm the editor of <a href="http://depotwebdesigner.com" class="sitepreview">{ Depotwebdesigner }</a> and <a href="http://depotwebdesigner.com" class="sitepreview">{ Codamaniacs }</a>,the Site Manager of both <a href="#" class="sitepreview"> { Tutoslinux }</a>, and <a href="#" class="sitepreview"> { Rabbitemplate }</a>. I spend too much time in front of the computer. } </div>
<li><a href="#box2">{ About }</a></li>
</ul>
<div align="center"> <img src="images/down.jpg" alt=""/> </div>
</div>
</div>
<div id="box2" class="box">
<div id="menu">
<ul>
<li class="activemenu"><a href="#home">{ HOME }</a></li>
<li><a href="#box1">{ PORTFOLIO }</a></li>
<li><a href="#box2">{ About }</a></li>
<div class="contenu"> { Hi, I'm Arbaoui Mehdi. I'm the editor of <a href="http://depotwebdesigner.com" class="sitepreview">{ Depotwebdesigner }</a> and <a href="http://depotwebdesigner.com" class="sitepreview">{ Codamaniacs }</a>,the Site Manager of both <a href="#" class="sitepreview"> { Tutoslinux }</a>, and <a href="#" class="sitepreview"> { Rabbitemplate }</a>. I spend too much time in front of the computer. } </div>
</ul>
</div>
</div>
</body>
</html>
Code CSS :
@charset "UTF-8";
/* CSS Document */
body {
background:black url(../images/backgsround.jpg) no-repeat;
margin:auto;
}
#menu a {
font: 80px/48px "Arial Black", Gadget, sans-serif;
letter-spacing: 0;
text-decoration:none;
color:white;
}
#menu ul
{
margin:0px;
padding:0;
}
#menu li
{
margin:2px 0px 0px 0px;
padding:25px 25px 25px 25px;
background-color:#303030;
}
#menu a.sitepreview
{
font: 35px/48px "Arial Black", Gadget, sans-serif;
color:#CCC;
}
#menu a:hover.sitepreview
{
font: 35px/48px "Arial Black", Gadget, sans-serif;
color:white;
}
#menu li:hover
{
margin:2px 0px 0px 0px;
padding:25px 25px 25px 25px;
background-color:#666;
color:white;
}
#menu .activemenu
{
background-color:white;
}
#menu .activemenu a
{
color:black;
}
#container {
color:white
}
#footer
{
width:100%;
height:362px;
background:url(../images/footer.jpg) repeat-x;
}
.contenu
{
font: 30px/48px "Arial Black", Gadget, sans-serif;
letter-spacing: 0;
text-decoration:none;
padding:25px 25px 25px 25px;
color:white;
}
.imgreferences
{
border:10px solid white;
}
.contenuPortfolio
{
padding:25px 25px 25px 25px;
color:white;
}