Sample JavaScript code

<script type="text/javascript">
smoothEaseOut = function(t, b, c, d){
   var result = -c * (t /= d) * (t - 2) + b;
   eturn result;
}
new wrapScroll('movable1','wrap');
var mov2 = new wrapScroll('movable2','wrap');
mov2.setTween(smoothEaseOut, 100);
</script>

Sample CSS Layout code

/* -- layout -- */
#wrap {
   width:100%;
   float:left;
}
#content {
   margin-right:400px;
}
#sidebar {
   float:left;
   margin-left:-390px;
   width:90px;
}
#movable1 {
   width:150px;
}
#movable2 {
   width:150px;
   margin-left:190px;
}

Sample CSS Design code

/* -- design -- */
#content .column {
   background-color:#fff;
   border:8px solid #eee;
   padding:8px;
   margin-bottom:10px;
   height:2000px;
}
#movable1{
   background-color:#f1f5fa;
   border:8px solid #c9d8ed;
   padding:8px;
   height:150px;
}
#movable2{
   background-color:#f5faf1;
   border:8px solid #d8edc9;
   padding:8px;
   height:150px;
}
code {
   display:block;
   margin:8px 0px;
   padding:8px;
   font-size:small;
   color:#008000;
   line-height:130%;
   background:#fbfbfc;
   border:1px solid #eee;
}

Sample HTML body code

<body>
<div id="container">

   <div id="wrap">
   <div id="content">
   <div class="column">#content .column</div>
   </div>
   </div>

   <div id="sidebar">
   <div id="movable1">#movable1</div>
   <div id="movable2">#movable2</div>
   </div>
</div>
<!-- end of container -->
</body>
© youmos.com