Screen Shrink using Scale

Question

I'm trying to create a particular effect but I'm getting stuck. Essentially what is supposed to happen is when the user clicks on the nav (in the snippet below, I've made it so you just click on the body) the:

1. main screen shrinks
2. an off canvas menu slides in from the left
3. A semi transparent overlay appears

My problem is with the scale effect. The effect I am trying to achieve is when the window shrinks, you can see the entirety of the window, just a miniature version. The closest I've been able to get is the snippet, where the window shrinks, but it's still fully scroll-able rather than the window shrinking proportionally to become a miniature version

The way I have it now, you can still scroll the entirety of the page but I'm going to take care of that with a e.preventDefault but I'd like to get the screen-shrink in order first.

Can anyone help?

$(document).ready(function() {
	
	var pageContainer = $('.page-container');
	var offCanvas = $('.off-canvas');
	
	pageContainer.click(function() {
		
		offCanvas.toggleClass('menuActive')
		pageContainer.toggleClass('pc-active');
		
		
	});
	
	
	
});

* {
	padding: 0;
	margin: 0;
}

.off-canvas {
	position: absolute;
	left: 0;
	top: 0;
	height: 100vh;
	width: 300px;
	background-color: blue;
	transition: all .3s ease;
	transform: translate3d(-300px, 0, 0);
	z-index: 10;
}

.menuActive {
	transform: translate3d(0, 0, 0);
}

.page-container {
	border: 4px solid;
	height: 100%;
	width: 100%;
	min-height: 1200px;
	background-color: #ccc;
	transform: scale3d(1, 1, 1);
	transition: all .4s ease;
}

.pc-active {
	transform: scale3d(.9, .9, .1)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container"></div>

Answer 1

You can make use of margin-left to move the miniature to the offset of your sidenavbar on toggle, as well as scale it to your desired value by setting a minimum-height in terms of vh with transform-origin as top left.

$(document).ready(function() {
	
	var pageContainer = $('.page-container');
	var offCanvas = $('.off-canvas');
	
	pageContainer.click(function() {
		
		offCanvas.toggleClass('menuActive')
		pageContainer.toggleClass('pc-active');
		
		
	});
	
	
	
});

* {
	padding: 0;
	margin: 0;
}

.off-canvas {
	position: absolute;
	left: 0;
	top: 0;
	height: 100vh;
	width: 300px;
	background-color: blue;
	transition: all .3s ease;
	transform: translate3d(-300px, 0, 0);
	z-index: 10;
}

.menuActive {
	transform: translate3d(0, 0, 0);
}

.page-container {
	border: 4px solid;
	height: 100%;
	width: 100%;
	min-height: 1200px;
	background-color: #ccc;
	transform: scale3d(1, 1, 1);
	transition: all .4s ease;
  text-align:center;
}

.pc-active {
  margin-left:310px;
  transform-origin:left top;
  min-height:90vh;
  transform: scale(0.4,0.4);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container">
<h3> Page content</h3>
Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff Random Stuff 
</div>

Answer 2

You can set the width/height in vw/vh unit to resize it according to the window

See code snippet:

$(document).ready(function() {

  var pageContainer = $('.page-container');
  var offCanvas = $('.off-canvas');

  pageContainer.click(function() {

    offCanvas.toggleClass('menuActive')
    pageContainer.toggleClass('pc-active');


  });



});

* {
  padding: 0;
  margin: 0;
}

.off-canvas {
  position: absolute;
  left: 0;
  top: 0;
  height: 100vh;
  width: 300px;
  background-color: blue;
  transition: all .3s ease;
  transform: translate3d(-300px, 0, 0);
  z-index: 10;
}

.menuActive {
  transform: translate3d(0, 0, 0);
}

.page-container {
  border: 4px solid;
  height: 100%;
  width: 100%;
  min-height: 1200px;
  background-color: #ccc;
  transform: scale3d(1, 1, 1);
  transition: all .4s ease;
}

.pc-active {
  width: 90vw;
  height: 90vh;
  min-height: 90vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="off-canvas"></div>
<div class="page-container"></div>