Skip to content

Instantly share code, notes, and snippets.

@BenJam

BenJam/csstransitions.html

Created March 31, 2011 16:06
Show Gist options
  • Save BenJam/896659 to your computer and use it in GitHub Desktop.
Save BenJam/896659 to your computer and use it in GitHub Desktop.
Download ZIP
my first attempt at hand-coding a 2D plane of windows for a SPA
Raw
csstransitions.html
<!DOCTYPE HTML>
<html>
<head>
<title>css transitions</title>
<script src="jquery-1.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
background: #000;
}
a{
color:#fff;
text-decoration:none;
}
ul li{
display:inline;
margin:0.5em;
}
#nav{
z-index:30;
font-size: 13px;
color: #ccc;
position:absolute;
width:100%;
top:0px;
left:0px;
height: 41px;
text-transform: uppercase;
text-align:center;
}
#view {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#container {
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 200%;
font: 16px/1.5 Helvetica, Sans-Serif;
background: white;
-webkit-transition: top, left 250ms ease;
-webkit-transition-duration: 250ms;
-webkit-transition- function: ease;
}
#container.shifted {
left: -100%;
}
#pink{
background-color:#FD6E8A;
}
#palepink{
background-color:#FFC2CE;
}
#purple{
background-color:#4F3B75;
}
#palepurple{
background-color:#8359A3;
}
#blue{
background-color:#327CCB;
}
#paleblue{
background-color:#8ABCF2;
}
.screen {
z-index:10;
float: left;
width: 33%;
height: 50%;
font-size: 24px;
line-height: 480px;
text-align: center;
}
.bar{
position:absolute;
z-index:40;
font-size: 13px;
color: #fff;
width:60px;
height: 100%;
min-height: 100%;
text-transform: uppercase;
text-align:center;
vertical-align:middle;
}
.next{
}
.previous{
top: 0;
left: 0;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<div id='nav'>
<ul>
<li id='previous'><a href='#'>Prev</a></li>
<li id='up'><a href='#'>Up</a></li>
<li id='down'><a href='#'>Down</a></li>
<li id='next'><a href='#'>Next</a></li>
</ul>
</div>
<div id="view">
<div id="container">
<div id='pink'class="screen">Home</div>
<div id='purple' class="screen">Candidates</div>
<div id='blue'class="screen">Contact</div>
<div class='clear'></div>
<div id='palepink'class="sub screen">Home Submenu</div>
<div id='palepurple'class="sub screen">Candidates Submenu</div>
<div id='paleblue'class="sub screen">Contact Submenu</div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
(function ($){
var x=0; //x direction
var y=0; //y direction
var container = document.getElementById('container');
function toggle() {
container.className = container.className.indexOf('shifted') > -1 ? '': 'shifted';
}
//TODO This is a hugely crap way of 2D transitions, there must be something more beautiful
$('#next').click(function(){
if(0 < x < 3){
x++;
$(container).css('left',-x*100+'%');
}else{
console.error('Nothing else there');
}
});
$('#previous').click(function(){
if(0 < x < 3){
x--;
$(container).css('left',-x*100+'%');
}else{
console.error('Nothing else there');
}
});
$('#down').click(function(){
if(0 < y < 2){
y++;
$(container).css('top',-y*100+'%');
}else{
console.error('Nothing else there');
}
});
$('#up').click(function(){
if(0 < y < 2){
y--;
$(container).css('top',-y*100+'%');
}else{
console.error('Nothing else there');
}
});
// assign event handlers
// if (navigator.userAgent.indexOf('iPhone') > -1) {
// container.addEventListener('touchend', function () {
// toggle();
// }, false);
// }
// else {
// container.addEventListener('mouseup', function () {
// toggle();
// }, false);
// }
})(jQuery);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment