Scaleを使用して画面を縮小する

Question

私は特定の効果を作り出そうとしていますが、私は立ち往生しています。基本的にユーザーがnavをクリックしたときに何が起こることになっていることである（あなただけの体をクリックして、以下のスニペットでは、私はそれを作った）：

1. メイン画面が
2. オフキャンバスを縮小
3. 左半透明のオーバーレイからのメニュースライドは

私の問題は、規模の効果がある表示されます。私が達成しようとしている効果は、ウィンドウが縮小したとき、ウィンドウの全体を見ることができる、ちょうどミニチュアバージョンです。私が得ることができる最も近いのは、ウィンドウが縮小するスニペットですが、ウィンドウが縮小されて縮小版になるのではなく、まだ完全にスクロール可能です。

私はそれを今でも持っていますページ全体をスクロールしますが、私はe.preventDefaultでそれを処理しますが、最初に画面を縮小したいのですが。

誰でも手助けできますか？

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

* { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

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

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

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

 
.pc-active { 
 
\t 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

あなたはトグルにoffset of your sidenavbarにミニチュアを移動するだけでなく、transform-origin as top leftとvhの面で最小の高さを設定して、所望の値にそれを拡張するmargin-leftを利用することができます。

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

* { 
 
\t padding: 0; 
 
\t margin: 0; 
 
} 
 

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

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

 
.page-container { 
 
\t border: 4px solid; 
 
\t height: 100%; 
 
\t width: 100%; 
 
\t min-height: 1200px; 
 
\t background-color: #ccc; 
 
\t transform: scale3d(1, 1, 1); 
 
\t 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

あなたは

は、コードスニペットを参照してください。ウィンドウに合わせてサイズを変更するwidth/heightvw/vhの単位を設定することができます。

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