What pack you want to download

Develop by Zeh Fernandes. Special thanks to Zeno Rocha and Cezar Luiz.


<div id="container">

  <div id="stage1">
  //The content of this page

  <div id="stage2">
  //The content of this page


The id of stage is how you link

<a href="#stage2">Go to stage2</a>


Don't show scroll bars

body { overflow-x: hidden; overflow-y: hidden; }

In case you need vertical scroll

stage1 { overflow-y: auto; }


Put Jquery, ScrollTo Plugin and Jquery.fullContent

<script src="js/jquery-1.x.x.min.js" type="text/javascript"></script>
<script src="js/jquery.easing.min.js" type="text/javascript"></script>
<script src="js/jquery.scrollTo.js" type="text/javascript"></script>
<script src="js/jquery.fullContent.js" type="text/javascript"></script>

And you can configure this parameters:

  stages: 'div',
  mapPosition: [{v: 1, h: 1}, {v: 1, h: 2}, {v: 2, h: 1}, {v: 2, h: 2}],
  stageStart: 1,
  speedTransition: 800,
  idComplement: 'page_',
  ease: 'easeOutQuad' });

The Map Position

This parameter you can configuring the position which want your stage. V - vertical position H - horizontal position. For example

v1h1 | v1h2
v2h1 | v2h2

What the plugin does

  • Create fully containers with width and height of window
  • Dynamic position: Each container could have vertical and horizontal position set
  • History hash in URL
  • Scroll animation between containers
  • Simple configuration and easy use
Fork me on GitHub