Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A CodePen by David Miller. page flow experiment - exploring ways of flowing elements around page transition.
<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>
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');
});
/*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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.