What pack you want to download

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

Markup

<div id="container">

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

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

</div>

The id of stage is how you link

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

Style

Don't show scroll bars

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

In case you need vertical scroll

stage1 { overflow-y: auto; }

Javascript

Put Jquery, ScrollTo Plugin and Jquery.fullContent

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

And you can configure this parameters:

$('#container').fullContent({
  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_'
});

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