ralphsmith80/off-canvas-transistion

## 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>
	<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>