Hide and show full size DIV containers with CSS3 transitions on translate, rather than top, right, bottom, or left offset.
A Pen by Andrea Collet on CodePen.
<div class="container"> | |
<div id="page1" data-id="1" class="page"> | |
<h2>page 1</h2> | |
</div> | |
<div id="page2" data-id="2" class="page"> | |
<h2>page 2</h2> | |
</div> | |
<div id="page3" data-id="3" class="page"> | |
<h2>page 3</h2> | |
</div> | |
</div> | |
<ul class="change-page"> | |
<li> | |
<a id="button-1" href="#" title="button-1" class="button" data-page-id="1">page 1</a> | |
</li> | |
<li> | |
<a id="button-2" href="#" title="button-2" class="button" data-page-id="2">page 2</a> | |
</li> | |
<li> | |
<a id="button-3" href="#" title="button-3" class="button" data-page-id="3">page 3</a> | |
</li> | |
</ul> |
function showPage(pid) { | |
$(".page").addClass("hidden").filter("[data-id='" + pid + "']").removeClass("hidden"); | |
return this; | |
} | |
$(".button").on("click", function(evt) { | |
evt.preventDefault(); | |
evt.stopPropagation(); | |
var $this = $(this); | |
showPage($this.attr("data-page-id")); | |
return; | |
}); | |
showPage(1); |
Hide and show full size DIV containers with CSS3 transitions on translate, rather than top, right, bottom, or left offset.
A Pen by Andrea Collet on CodePen.
@import "compass"; | |
body { | |
margin: 0; | |
border: 0; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
.container { | |
position: absolute; | |
top: 0; | |
left: 0; | |
margin: 0; | |
border: 0 none; | |
padding: 0; | |
width: 100%; | |
height: 100%; | |
background: #D6A1A7; | |
overflow: hidden; | |
.page { | |
@include transition(transform 1s ease-in-out); | |
@include translateX(0); | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
h2 { | |
color: #fff; | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 50px; | |
font-weight: 100; | |
line-height: 1em; | |
margin-left: 50px; | |
} | |
&.hidden { | |
@include translateX(100%); | |
} | |
&#page1 { | |
background-color: #D07187; | |
} | |
&#page2 { | |
background-color: #D07187; | |
} | |
&#page3 { | |
background-color: #B6D9D3; | |
} | |
} | |
} | |
.change-page { | |
position: absolute; | |
display: inline-block; | |
right: 0; | |
left: 0; | |
margin: 0 auto; | |
border: 0 none; | |
padding: 0; | |
text-align: center; | |
list-style: none; | |
li { | |
display: inline-block; | |
a { | |
display: block; | |
padding: 15px; | |
font-family: Helvetica, Arial, sans-serif; | |
font-size: 11px; | |
line-height: 1em; | |
color: #fff; | |
text-decoration: none; | |
text-transform: uppercase; | |
background: black; | |
&:hover { | |
color: black; | |
background: darkgray; | |
} | |
} | |
} | |
} | |
} |