PageChanger

by Ben Clayton

HTML

<div class="panel p1">
  <div class="handle">
    <div class="label">
      <div class="label-inner">
        Flow Site
      </div>
    </div>
  </div>
  <iframe src="https://flowcms.infxsolutions.com/" class="myframe"></iframe>
</div>
<!-- ================================================================   -->
<div class="panel p2">
  <div class="handle">
    <div class="label">
    <div class="label-inner">
      Scaling Images
      </div>
    </div>
  </div>
  <iframe src="https://flowcms.infxsolutions.com/the-middle/scaling-images/" class="myframe"></iframe>
</div>

CSS

.panel {
  position: absolute;
  left: 100%;
  transition: left 2s, opacity 2s;
  z-index: 10;
}

.panel.open + .panel {
  opacity: 1;
}

.panel.p2 {
  opacity: 0;
  z-index: 9;
}

.myframe {
  width: 1080px;
  height: 800px;
  outline: none;
  border: none;
  background-color: #FFFFFF;
  margin-left:20px;
  transition:margin-left 2s;
  /* opacity:0.1; */
}

.panel.open .myframe {
  opacity: 1;
  margin-left:0px;
}

.handle {
  position: absolute;
  left: 0px;
  top: 0px;
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 50px;
  opacity: 1;
  transition: opacity 2s;
  border-radius: 15px 0px 0px 15px;
}

.panel.open .handle {
  opacity: 0;
}

.handle .label {
  position: relative;
  xborder: 1px solid red;
  width:400px;
  left:-176px;
  top:0px;
}

.handle .label .label-inner {
  transform: rotate(-90deg);
  font-size: 28px;
  font-family: Arial;
  color: #FFFFFF;
  position: relative;
  xborder: 1px solid green;
}

JavaScript

$(".panel").click(function() {
  $(this).css({
    'left': '0%',
    'z-index': 1
  }).addClass('open');

});

$('.myframe').css({
  'width': $(window).width(),
  'height': $(window).height()
})
var p = ((1 - 50 / $(window).width()) * 100) + "%";
console.log(p);
$(".panel").css('left', p);