Having trouble achieving a specific effect and could use some assistance. My goal is to create an action where, upon clicking on the nav element (for simplicity, I've set it to be triggered by clicking anywhere on the body), the following should occur:
- The main screen should shrink
- An off-canvas menu slides in from the left
- A semi-transparent overlay appears
The issue lies with the scale effect. My aim is for the window to shrink proportionally, displaying a miniaturized version of the content. However, in my current implementation, the entire page remains scrollable when the window shrinks. I plan to address this using e.preventDefault, but first, I need to correctly implement the screen-shrink effect.
If anyone can offer guidance or a solution, it would be greatly appreciated.
$(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>