One Column Slider Layout

So you know what the aim of this tutorial is, take a look at the end result. This is a fairly technical website, but uses the Moo.fx javascript library for the effects. Make sure that it is downloaded and installed before getting started.

The Ultimate Designer Toolkit: 2 Million+ Assets

Envato Elements gives you unlimited access to 2 million+ pro design resources, themes, templates, photos, graphics and more. Everything you'll ever need in your design resource toolkit.

Explore Digital Assets

Setting up Moo.fx

First of all, you need to download this Javascript package from the Moo.fx site. Make sure that this is included in the head of each page.


You can download a copy of the HTML for the page to take a look and see how the effect is achieved.


Put it all together

Make sure you reference Moo.fx and the style sheet in the head of your HTML document, and you should be ready to go! Adding new sections to the layout is as simple as adding a new heading and following the structure which is already there.