Skip to content

Instantly share code, notes, and snippets.

@ralphsmith80

ralphsmith80/off-canvas-transistion

Last active August 29, 2015 14:05
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ralphsmith80/7ed447bc070b255a3168 to your computer and use it in GitHub Desktop.
Save ralphsmith80/7ed447bc070b255a3168 to your computer and use it in GitHub Desktop.
Download ZIP
Off Canvas Transition - Progressive Enhancement
Raw
off-canvas-transistion
<head>
<!-- Viewport meta tag to prevent iPhone from scaling our page -->
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1.0; user-scalable=yes;"/>
<style>
body {
margin: 0;
background-color: linen;
}
.main {
width: 100%;
height: 100%;
background-color: lightgreen;
text-align: center;
}
/* makeing the main content drop a bit just for fun */
body {
perspective: 1500px;
}
.main {
transform-style: preserve-3d;
transition: 1s ease all;
}
.main.drop {
transition: .3s ease all;
transform: translate3d(0, 0, -300px);
}
/* off-canvas style */
.canvas-container {
height: 100%;
background-color: lightblue;
position: absolute;
top: 0;
margin-left: -100%;
transition: margin-left .3s ease;
transform: translate3d(-100%, 0, 0);
}
.canvas-container.show {
margin-left: 0%;
transition: margin-left 1s ease;
transform: translate3d(0%, 0, 0);
}
/* giving the content inside the canvas view more width just for show */
.canvas-container p {
width: 200px;
}
</style>
</head>
<body>
<div class=main>
<p>Main Content</p>
<button type=button>show canvas</button>
</div>
<div class='canvas-container'>
<p>I'm a canvas view!</p>
<p>
You can close me by:</br>
1. clicking off me</br>
2. pressing the escape button</br>
3. clicking the close button</br>
</p>
<button type=button>close</button>
</div>
<!-- use older version of jquery for IE8 support -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> -->
<script>
window.onload = function() {
$('button').on('click', function(evt) {
$('.canvas-container').toggleClass('show');
$('.main').toggleClass('drop');
$('.canvas-container button').focus();
});
$('body').on('keyup', function(evt) {
if (evt.which === 27) {
$('.canvas-container').removeClass('show');
$('.main').removeClass('drop');
$('.main button').focus();
}
});
$('body').on('touchend mouseup', function(evt) {
if (!$(evt.target).closest('.canvas-container').length) {
$('.canvas-container').removeClass('show');
$('.main').removeClass('drop');
$('.main button').focus();
}
});
};
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment