I’ve been playing around with the Mootools javascript framework for over 12 months now. I am by no stretch of the imagination, a savy javascript coder, but can have learnt enough to get by and produce a result both my client and I are happy with.

Using this javascript framework, you can bring your sad static web page to life using only a few lines of code.
You can quickly create collapsible containers, accordions, slide content, and add AJAX to your website and much much more.
I have seen this sliding masked technique used alot and I wanted to replicate it in it’s most basic form.
If this helps anyone beginning to learn Mootools, then please feel free to use it.

It starts off with a masked div, containing a very wide absolutely positioned div which contains the double wide columns, which then contains the four final divs.

HTML Code:

<div id="mask">
    <div id="folio">
      <div class="col">
        <div class="site">
          <h5>adra</h5>
          <a href="http://www.adra.org.nz" target="_blank">
          <img src="/images/portfolio_web_adra.gif" border="0" />
          <span>www.adra.org.nz</span></a>
        </div>
        <div class="site">
          <h5>adrian hodge</h5>
          <a href="http://www.adrianhodge.com" target="_blank">
          <img src="/images/portfolio_web_adrian.gif" border="0" />
          <span>www.adrianhodge.com</span></a>
        </div>
        <div class="site">
          <h5>bienetre</h5>
          <a href="http://www.bienetre.co.nz" target="_blank">
          <img src="/images/portfolio_web_bienetre.gif" border="0" />
          <span>www.bienetre.co.nz</span></a>
        </div>
        <div class="site">
          <h5>billsblog</h5>
          <a href="http://www.billsblog.co.nz" target="_blank">
          <img src="/images/portfolio_web_billsblog.gif" border="0" />
          <span>www.billsblog.co.nz</span></a>
        </div>
      </div>
      <div class="col">
        <div class="site">
          <h5>cablesearch</h5>
          <a href="http://www.cablesearch.co.nz" target="_blank">
          <img src="/images/portfolio_web_cablesearch.gif" border="0" />
          <span>www.cablesearch.co.nz</span></a>
        </div>
        <div class="site">
          <h5>delectable</h5>
          <a href="http://www.delectable.co.nz" target="_blank">
          <img src="/images/portfolio_web_delectable.gif" border="0" />
          <span>www.delectable.co.nz</span></a>
        </div>
        <div class="site">
          <h5>farmmap</h5>
          <a href="http://www.fmsl.co.nz" target="_blank">
          <img src="/images/portfolio_web_farmmap.gif" border="0" />
          <span>www.fmsl.co.nz</span></a>
        </div>
        <div class="site">
          <h5>fionahodge</h5>
          <a href="http://www.fionahodge.com" target="_blank">
          <img src="/images/portfolio_web_fionahodge.gif" border="0" />
          <span>www.fionahodge.com</span></a>
        </div>
      </div>
    </div>
</div>

CSS Styles:

#mask {
	width:505px;
	height:305px;
	overflow:hidden;
	border:1px solid #666;
	position:relative;
	background-color:#999;
	}
#folio {
	position:absolute;
	top:0;
	left:0;
	width:3535px;
	float:left;
}
.col {
	display:block;
	width:505px;
	height:305px;
	float:left;
	}
.site {
	width:233px;
	height:133px;
	float:left;
	padding:5px;
	margin:5px 0 0 5px;
	border:1px solid #666;
	background-color:#FFF;
	font-size:11px;
	font-family:"Courier New", Courier, monospace;
	}

Javascript Function:

function slideFolio(col){
	var x = ((col-1)*-505)
	var folioChange = new Fx.Style('folio', 'left', {duration:2000});
	folioChange.start(x);
	var cur = "trigger"+col;
	$(cur).addClass('current');

	for (i=1;i<=8;i++){
		var loopLI = "trigger"+i;
		if (cur==loopLI){}else{
			$(loopLI).removeClass('current');
		}
	}
}

Result

• 1
• 2
• 3
• 4
• 5
• 6
• 7