A CodePen by David Miller. page flow experiment - exploring ways of flowing elements around page transition.

index.html

<header>
  <div class="button first" href="#1">1</div>
  <a class="button second" href="#2">2</a>
  <a class="button third" href="#3">3</a>
  <a class="button fourth" href="#4">4</a>
</header>


<div id="container"> 
  
  
  <div id="zero" class="chunk">
    page one
  </div>
  <div id="one" class="chunk">
    page 2<br /> bits
  </div>
  <div id="two" class="chunk">
    page 3<br /> bits<br /> bobs
  </div>
  <div id="three" class="chunk">
    page4 
  </div>




</div><!--container-->

<footer>Some footer information, call to action panel, etc.</footer>

script.js

var pagelocation = "zero";

$(".first").click(function(){  
  alert("yo");
  $("#container").removeClass(pagelocation).addClass('zero');
  pagelocation = 'zero';
});

$('.second').click(function(){
  alert('yo');
  $("#container").removeClass(pagelocation).addClass('one');
  pagelocation = 'one';
});

$('.second').click(function(){
  $("#container").removeClass(pagelocation).addClass('one');
  pagelocation = 'one';
});

$('.second').click(function(){
  $("#container").removeClass(pagelocation).addClass('one');
  pagelocation = 'one';
});

$('.button').click(function(){
  alert('yo');
});

style.css

/*resets*/

* {  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
 -webkit-transform: translate(0,0);
 -moz-transform: translate(0,0);
}

body{ padding:0; margin:0; font-family: arial, droid-sans, sans;}


/*structure*/
header {
  width:25%;
  padding:1em;
  line-height:3em;
  background:rgba(30,60,90,0.3);
}

.chunk {
  width:25%;
  float:left;
  padding:1em;
  line-height:3em;
  border:1px solid rgba(3,3,3,0.3);
}

footer {
  
  clear:both;
  width:25%;
  padding:1em;
  line-height:3em;
  background:rgba(90,60,30,0.3);
}

/*mechanics */

.button{
  text-align:center;
  margin:20px;
  text-decoration:none;
  font-size:20px;
  font-family:arial,droid sans; 
  border-radius:100%;
  border: 4px solid rgba(40,240,140, 0.3);
  width:50px;
  height:50px;
  display:inline-block;
  
  color: black;
  text-shadow: 2px 2px 6px rgba(3,3,3,0.3);
  background: rgba(150,255,20, 0.5);
  box-shadow: inset 2px 2px 6px rgba(3,3,3,0.3);
  -webkit-transform: translate(0,0);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
}


.button:hover{
background: rgba(150,255,20, 1.0);
-webkit-transform: rotate(-17deg);
-moz-transform: rotate(-17deg);
}

.button:active{
background: rgba(240,140,40,0.9);
}

#container {
transition: transform 0.2s;
}

container.first {
-webkit-transform: translate(0,0);
}

container.second {
-webkit-transform: translate(-25%,0);
}

container.third {
-webkit-transform: translate(-50%,0);
}

container.second {
-webkit-transform: translate(-75%,0);
}