javascript - 使用比例缩小屏幕

Question

我正在尝试创建一个特定的效果，但我被卡住了。本质上应该发生的是当用户点击 nav(在下面的代码片段中，我已经做到了，所以你只需点击正文):

1. 主屏幕缩小
2. Canvas 外菜单从左侧滑入
3. 出现半透明覆盖层

我的问题是规模效应。我想要达到的效果是当窗口缩小时，你可以看到整个窗口，只是一个缩小版。我能得到的最接近的片段是窗口缩小的片段，但它仍然是完全可滚动的，而不是窗口按比例缩小成为一个微型版本

我现在的方式是，您仍然可以滚动整个页面，但我将使用 e.preventDefault 来解决这个问题，但我想获得屏幕-先按顺序收缩。

有人能帮忙吗？

$(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

您可以使用 margin-left 将缩图移动到切换时 sidenavbar 的偏移量，并通过设置vh 的最小高度，transform-origin 为左上角。

$(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>