Sample JavaScript code

<script type="text/javascript">
opacityEaseIn = function(t, b, c, d, s){
   var op = ( c > 1 || c < -1 ) ? 0.3 : 1;
   if((t == 0) || (op == 1)){
      s.opacity = op;
      s.filter = 'alpha(opacity=' + op * 100 + ')';
   }
   return c * Math.pow( 2, 10 * (t/d - 1) ) + b;
}
new wrapScroll('movable1','wrap');
var mov2 = new wrapScroll('movable2','wrap');
mov2.setTween(opacityEaseIn, 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