bindClicks();
animate("down");
function animate(d) {
// stacking order
$('.content_container:first').css("z-index", "2");
$('.content_container:last').css("z-index", "1");
// animate fade and move background, only if count more than 1
if ($(".content_container").length > 1) {
if (d == "down") {
$('.content_container:last').animate({ opacity: 0, top: "100%" }, 500, function() {});
} else if (d == "up") {
$('.content_container:last').animate({ opacity: 0, top: "-100%" }, 500, function() {});
} else if (d == "left") {
$('.content_container:last').animate({ opacity: 0, right: "100%" }, 500, function() {});
} else if (d == "right") {
$('.content_container:last').animate({ opacity: 0, right: "-100%" }, 500, function() {});
}
}
// move top element in
$('.content_container:first').animate({ top: "0%", right: "0%" }, 500, function() {
// if there's more than one content_container, remove the last one
if ($(".content_container").length > 1) {
$('.content_container:last').remove();
setTimeout(function () {
$('.content_container').addClass("not_scaled");
}, 750);
}
});
} // end animate function
function bindClicks() {
$("a.button").click(function() {
$('.content_container').removeClass("not_scaled");
a = $('.content_container').clone();
a.addClass("scaled"); // start it scaled
// set location of duplicated div off stage
a.css("top", "0");
a.css("right", "0");
if ($(this).hasClass("down")) { a.css("top", "-100%"); }
if ($(this).hasClass("up")) { a.css("top", "100%"); }
if ($(this).hasClass("left")) { a.css("right", "-100%"); }
if ($(this).hasClass("right")) { a.css("right", "100%"); }
$(".page_container").prepend(a);
$('.content_container:last').addClass("scaled");
var clickedItem = $(this);
setTimeout(function (self) {
if (clickedItem.hasClass("down")) {
animate("down");
} else if (clickedItem.hasClass("up")) {
animate("up");
} else if (clickedItem.hasClass("left")) {
animate("left");
} else if (clickedItem.hasClass("right")) {
animate("right");
}
bindClicks();
}, 1000);
}); // end a.button click
} // end bindClicks
<div class="page_container">
<div class="content_container">
<a class="button up" href="#">↑ Transition Up</a>
<a class="button down" href="#">↓ Transition Down</a>
<a class="button left" href="#">← Transition Left</a>
<a class="button right" href="#">Transition Right →</a>
</div>
</div>
body, html {
height: 100%;
width: 100%;
}
.page_container {
background: url("http://www.dawsonmediadesign.com/images/thatch.jpg");
height: 100%;
width: 100%;
}
.content_container {
position: absolute;
top: -100%;
width:100%;
min-height: 100%;
background-color: white;
margin: 0 auto;
-webkit-box-shadow:0 0 10px #333;
-moz-box-shadow: 0 0 10px #333;
box-shadow:0 0 10px #333;
}
.scaled {
transform: scale(0.95, 0.95);
-moz-transform: scale(0.95, 0.95);
-ms-transform: scale(0.95, 0.95);
-webkit-transform: scale(0.95, 0.95);
-o-transform: scale(0.95, 0.95);
}
.not_scaled {
transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-webkit-transform: scale(1, 1);
-o-transform: scale(1, 1);
}
.scaled, .not-scaled {
-webkit-transition: .5s ease-out;
-moz-transition: .5s ease-out;
-ms-transition: .5s ease-out;
-webkit-transition: .5s ease-out;
-o-transition: .5s ease-out;
}
/* button code for illustration only */
.button {
width: 140px;
text-decoration: none;
border:1px solid #25729a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-family:arial, helvetica, sans-serif;
padding: 10px 10px 10px 10px;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
text-align: center;
color: #FFFFFF;
background-color: #3093c7;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3093c7), color-stop(100%, #1c5a85));
background-image: -webkit-linear-gradient(top, #3093c7, #1c5a85);
background-image: -moz-linear-gradient(top, #3093c7, #1c5a85);
background-image: -ms-linear-gradient(top, #3093c7, #1c5a85);
background-image: -o-linear-gradient(top, #3093c7, #1c5a85);
background-image: linear-gradient(top, #3093c7, #1c5a85);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#3093c7, endColorstr=#1c5a85);
}
.button:hover{
border:1px solid #1c5675;
background-color: #26759e;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#26759e), color-stop(100%, #133d5b));
background-image: -webkit-linear-gradient(top, #26759e, #133d5b);
background-image: -moz-linear-gradient(top, #26759e, #133d5b);
background-image: -ms-linear-gradient(top, #26759e, #133d5b);
background-image: -o-linear-gradient(top, #26759e, #133d5b);
background-image: linear-gradient(top, #26759e, #133d5b);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#26759e, endColorstr=#133d5b);
}
.button.up {
position: absolute;
top: 20px;
left: 50%;
margin-left: -70px;
}
.button.down {
position: absolute;
bottom: 20px;
left: 50%;
margin-left: -70px;
}
.button.left {
position: absolute;
left: 20px;
top: 50%;
margin-top: -15px;
}
.button.right {
position: absolute;
right: 20px;
top: 50%;
margin-top: -15px;
}
.content_container {
background: rgb(239,239,239); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(239,239,239,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(239,239,239,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(239,239,239,1) 0%,rgba(255,255,255,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefef', endColorstr='#ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
}