I found some examples and determined these types of page transitions are just manipulation of location of your element on the page.
Here's an example of a page sliding in from left to right. The basics here are
- setting a position to absolute for your item,
- setting the start location (in this example left margin)
- setting the -webkit-transition: all 0.5s ease-in-out;
- and then on loading the page, changing the class to a class with a different left margin (I used jquery here since it's the easiest to accomplish)
Here's the code:
<!DOCTYPE html>
<html>
<head>
<title>Title of My Page</title>
<meta charset="utf-8">
<meta name="description" content="The head tag contains the title and meta tags - important to the search engines, and information for the browser to properly display the page.">
<style type="text/css">
/* set the starting position for the element */
.previous{
left: -100%;
}
/* setup the element to move */
#Home{
display:block;
position: absolute;
top:0px;
width: 100%;
height: 100%;
-webkit-transition: all 0.5s ease-in-out;
background: #cbd2d8;
}
/* set the final location of the element */
.current{
left: 0px;
}
</style>
<script type="text/javascript" src="jquery-1.4.3.js"></script>
<script type="text/javascript">
// change the class for #Home which changes the left location
$(document).ready(function() {
$("#Home").removeClass("previous");
$("#Home").addClass("current")
});
</script>
</head>
<body>
<div id="Home" class="previous">
Content Goes Here
</div>
</body>
</html>
To make the page go from right to left, change the css classes to:
.previous{
left: 100%;
}
.current{
left: 0px;
}
Left to right:
.previous{
left: -100%;
}
.current{
left: 0px;
}
Top to bottom:
.previous{
top: 100%;
}
.current{
top: 0px;
}
Bottom to Top:
.previous{
top: -100%;
}
.current{
top: 0px;
}
Quick and Easy
Posts
0 comments:
Post a Comment