A4 pages + zoom buttons

by clairezita

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
<body id="bodyEBD">
  
  <nav class="indice-right">
    <a class="btn" data-toggle="collapse" href="#collapseIndiceRight" role="button" aria-expanded="false" aria-controls="collapseIndiceRight">
      <i class="fa fa-plus-circle" aria-hidden="true"></i>
    </a>
    <div class="collapse" id="collapseIndiceRight">
      <a class="btn zoom"><i class="fa fa-plus"></i></a>
      <a class="btn zoom-out"><i class="fa fa-minus"></i></a>
      <a class="btn zoom-init"><i class="fa fa-circle"></i></a>
    </div>
  </nav>
  
  <div class="wrapperEBD">
    <section id="one" class="ebook-page">
      <img src="https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_intro.jpg" alt="" />
      <h3>TITLE</h2>
        <h3>SUBTITLE</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </p>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in...

SCSS

.indice-right {
  z-index: 99;
  display: block;
  position: fixed;
  zoom: reset;
  top: 5%;
  right: 3%;
  width: 3em;
}

#bodyEBD {
  margin: 0;
  padding: 0;
  background: grey;
  height: 100vh;
  * {
    box-sizing: border-box;
  }
  .wrapperEBD {
    transform-origin: top;
    margin: 0;
    top: 0;
    left: 50%;
    transform: translate(0, -50%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
}
  
.ebook-page {
  overflow: hidden;
  width: 21cm;
  height: 29.7cm;
  padding: 2cm;
  margin: 0.5cm;
  background: white;
  box-shadow: 0 4px 5px rgba(75, 75, 75, 0.2);
  outline: 0;
  position: relative;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
  p {
    text-align: justify;
  }
  img {
    width: 100%;
    height: auto;
  }
  
}

JavaScript

$(".collapse").collapse({
  toggle: false
});

// A4 RESPONSIVE
function adjustZoom() {
  var documentWidth = window.innerWidth;
  var documentHeight = window.innerHeight;
  var zoomWidth = documentWidth / (23 * 37.795276);
  var zoomHeight = documentHeight / (31.7 * 37.795276);
  var zoomLevel = Math.min(zoomWidth, zoomHeight);
  // stop zooming when book fits page
  if (zoomLevel >= 1) return;
  $(".wrapperEBD").css({
    // removing blur
    transform: "scale(" + zoomLevel + ") perspective(1px)",
    "-webkit-font-smoothing": "antialiased"
  });
}
adjustZoom();
window.addEventListener("load", adjustZoom);

// RIGHT NAV FIXED EVEN ZOOMING
function noZoom() {
  $(".indice-right").css({
    top: "5%",
    right: "3%",
    width: "3em"
  });
}
noZoom();
window.addEventListener("resize", noZoom);

// BUTTONS ZOOM IN - OUT - RESET
var zoom = 1;
$(".zoom").on("click", function () {
  zoom += 0.1;
  $(".wrapperEBD").css({
    transform: "scale(" + zoom + ")"
  });
});
$(".zoom-init").on("click", function () {
  adjustZoom();
  zoom = 1;
});
$(".zoom-out").on("click", function () {
  zoom -= 0.1;
  $(".wrapperEBD").css({
    transform: "scale(" + zoom + ")"
  });
});