<div class="scene">
  <div class="img-cont left cont-1" data-helper="0" data-blocks="1"></div>
  <div class="img-cont right cont-1" data-helper="0" data-blocks="1"></div>
  <div class="content cont-1">
    <h2 class="title">Page 1 Content</h2>
    <p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, incidunt. Recusandae veritatis quam quos quaerat molestiae rem officiis blanditiis, nulla sed, corporis, sunt eveniet earum sapiente officia possimus eligendi.</p>
    <span class="close">+</span>
  </div>
  <div class="img-cont left cont-2" data-helper="-1" data-blocks="2"></div>
  <div class="img-cont right cont-2" data-helper="1" data-blocks="2"></div>
  <div class="content cont-2">
  	<h2 class="title">Page 2 Content</h2>
    <p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, incidunt. Recusandae veritatis quam quos quaerat molestiae rem officiis blanditiis, nulla sed, corporis, sunt eveniet earum sapiente officia possimus eligendi.</p>
    <span class="close">+</span>
  </div>
  <div class="img-cont left cont-3" data-helper="-2" data-blocks="3"></div>
  <div class="img-cont right cont-3" data-helper="2" data-blocks="3"></div>
  <div class="content cont-3">
  	<h2 class="title">Page 3 Content</h2>
    <p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, incidunt. Recusandae veritatis quam quos quaerat molestiae rem officiis blanditiis, nulla sed, corporis, sunt eveniet earum sapiente officia possimus eligendi.</p>
    <span class="close">+</span>
  </div>
  <div class="img-cont left cont-4" data-helper="-3" data-blocks="4"></div>
  <div class="img-cont right cont-4" data-helper="3" data-blocks="4"></div>
  <div class="content cont-4">
  	<h2 class="title">Page 4 Content</h2>
    <p class="content-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, soluta, incidunt. Recusandae veritatis quam quos quaerat molestiae rem officiis blanditiis, nulla sed, corporis, sunt eveniet earum sapiente officia possimus eligendi.</p>
    <span class="close">+</span>
  </div>
  <!-- end of content -->
  <h1 class="heading">SCROLL</h1>
  <p class="scroll-down">scroll down</p>
  <p class="click-blocks">click blocks</p>
  <div class="pagination">
    <ul class="page-names">
      <li class="active" data-page="1">Page 1</li>
      <li data-page="2">Page 2</li>
      <li data-page="3">Page 3</li>
      <li data-page="4">Page 4</li>
    </ul>
    <ul class="page-dots">
      <li class="active" data-page="1">•</li>
      <li data-page="2">•</li>
      <li data-page="3">•</li>
      <li data-page="4">•</li>
    </ul>
  </div>
</div>
<p class="check-out">Check out my other <a href="https://codepen.io/suez/public/" target="_blank">pens</a></p>
@import "compass/css3";

@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PT_Sans-Web-Bold.ttf);
  font-family: ptsans-bold;
}
@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Regular.otf);
  font-family: pfs-regular;
}
@font-face {
  src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Medium.otf);
  font-family: pfs-medium;
}

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
ul {
  list-style-type: none;
}
html, body {
  height: 100%;
  overflow: hidden;
}
body {
  -webkit-font-smoothing: antialiased;
}

.scene {
  height: 100%;
  
  &.active {
    
    .heading,
    .scroll-down,
    .click-blocks,
    .pagination {
      opacity: 0;
      z-index: -100;
    }
    
    .heading {
      transform: translateX(-50%) translateY(-50%) scale(0.5);
    }
    .scroll-down {
      transform: rotate(-90deg) scale(0.5);
    }
    .click-blocks {
      transform: rotate(-90deg) scale(0.5);
    }
    .pagination {
      transform: translateX(-50%) translateY(-50%) scale(0.5);
    }
    
    .img-cont.active {
      margin-top: -10vh !important; // god forgive me
      width: 50vw;
      height: 100vh;
      transition: margin 0.3s, width 0.3s, height 0.3s;
      z-index: 500;
      
      &.left {
        margin-left: -50vw;
      }
      &.right {
        margin-left: 0;
      }
    }
    
  }
}

.heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  z-index: 100;
  font-size: 5vw;
  font-family: ptsans-bold;
  color: #ce2312;
  opacity: 0.7;
  transition: opacity 0.3s, transform 0.3s;
  will-change: opacity, transform;
}

.scroll-down {
  position: absolute;
  bottom: 13%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: rotate(-90deg);
  font-family: pfs-regular;
  font-size: 1.3vmax;
  transition: opacity 0.3s, transform 0.3s;
  will-change: opacity, transform;
  z-index: 100;
}

.click-blocks {
  position: absolute;
  top: 23%;
  left: 50%;
  transform-origin: 0% 50%;
  transform: rotate(-90deg);
  font-family: pfs-regular;
  font-size: 1.3vmax;
  transition: opacity 0.3s, transform 0.3s, color 0.3s;
  will-change: opacity, transform;
  z-index: 100;
}

.pagination {
  position: absolute;
  left: 50%;
  top: 95%;
  transform: translateX(-50%) translateY(-50%);
  transition: opacity 0.3s, transform 0.3s;
  will-change: opacity, transform;
  z-index: 100;
  
  .page-names {
    text-align: center;
    margin-bottom: 1vh;
    font-size: 1.2vw;
    
    li {
      display: none;
      will-change: opacity;
      font-family: ptsans-bold;
      
      &.active {
        display: block;
      }
    }
  }
  
  .page-dots {
    text-align: center;
    
    li {
      margin: 0.3vw;
      float: left;
      cursor: pointer;
      color: #cfcfcf;
      
      &.active {
        color: #020202;
      }
    }
  }
}

.img-cont {
  height: 80vh;
  width: 35vw;
  position: absolute;
  top: 10vh;
  left: 50%;
  background-size: cover;
  transition: margin 1s cubic-bezier(0.99,0.1,0.35,1.2);
  will-change: margin;
  z-index: 10;
  
  &.closing {
    transition: margin 0.3s, width 0.3s, height 0.3s;
  }
  
  &:not(.active) { 
    cursor: pointer;
    
    &:hover ~ .click-blocks {
      color: #ce2312;
    }
  }
  
  &.left {
    margin-left: calc(-35vw - 50px);
  }
  &.right {
    margin-left: 50px;
  }
  
  &.cont-1 {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-1.jpg') 50% 50% no-repeat fixed;
  }
  &.cont-2 {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-2.jpg') 50% 50% no-repeat fixed;
  }
  &.cont-3 {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-3.jpg') 50% 50% no-repeat fixed;
  }
  &.cont-4 {
    background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-4.jpg') 50% 50% no-repeat fixed;
  }
  
  @for $i from 2 through 10 {
    &.cont-#{$i} {
      &.left {
        margin-top: -100vh * ($i - 1);
      }
      &.right {
        margin-top: 100vh * ($i - 1);
      }
    }
  }
  
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  background: rgba(0,0,0, 0.5);
  padding: 2rem;
  overflow-x: hidden;
  overflow-y: auto;
  color: #f9bdbb;
  z-index: 2000;
  
  &.visible {
    opacity: 1;
    
    .title {
      transform: translateX(0);
    }

    .content-text {
      transform: scale(1);
      opacity: 1;
    }
    
    .close {
      transform: rotate(45deg);
    }
  }
  
  .title {
    font-size: 4rem;
    text-transform: uppercase;
    font-family: pfs-medium;
    transition: transform 0.5s 0.1s;
    transform: translateX(-115%);
  }

  .content-text {
    font-family: pfs-medium;
    font-size: 2rem;
    transition: transform 0.5s 0.2s, opacity 0.3s 0.2s;
    transform-origin: 50% 80%;
    transform: scale(0.3);
    opacity: 0;
  }
  
  .close {
    position: absolute;
    top: -0.5rem;
    right: 1rem;
    font-family: metropolis, sans-serif;
    font-size: 4rem;
    color: #fff;
    transform: rotate(45deg) translateY(-5rem);
    cursor: pointer;
    transition: transform 0.5s 0.3s cubic-bezier(0.45, 0.25, 0.7, 1.8), color 0.3s;

    &:hover {
      color: #FF524C;
    }
  }
}
.check-out {
  position: absolute;
  z-index: 1;
  bottom: 1rem;
  right: 1rem;
  font-family: pfs-regular;
}
View Compiled
$(document).ready(function() {
  
  var scrolling = false,
      curPage = 1,
      pages = $(".img-cont").length / 2,
      $left = $(".img-cont.left"),
      $right = $(".img-cont.right");
  
  function doMargins(paramPage) {
    
    scrolling = true;
    
    var _page = paramPage || curPage;
    
    $left.each(function() {
      var marginMult = parseInt($(this).attr("data-helper"), 10) + _page - 1;
      $(this).attr("style", "margin-top: "+ marginMult * 100 +"vh");
    });
    
    $right.each(function() {
      var marginMult = parseInt($(this).attr("data-helper"), 10) - _page + 1;
      $(this).attr("style", "margin-top: "+ marginMult * 100 +"vh");
    });
    
    setTimeout(function() {
      scrolling = false;
    }, 1000);
  }
  
  function navigateUp() {
    if (curPage > 1) {
      curPage--;
      pagination(curPage);
      doMargins();
    }
  }
  
  function navigateDown() {
    if (curPage < pages) {
      curPage++;
      pagination(curPage);
      doMargins();
    }
  }
  
  function pagination(page) {
    $(".page-dots li").removeClass("active");
    $(".page-dots li[data-page="+ page +"]").addClass("active");
    $(".page-names li").removeClass("active");
    $(".page-names li[data-page="+page+"]").addClass("active");
    curPage = page;
  }
  
  $(document).on("click", ".page-dots li", function() {
    if (!scrolling) {
      var page = parseInt($(this).attr("data-page"), 10);
      pagination(page);
      doMargins(page);
    }
  });
  
  function openContent() {
    var number = $(this).attr("data-blocks");
    $(".scene").addClass("active");
    setTimeout(function() {
      $(".img-cont.cont-"+number).addClass("active");
      
      $(document).off("click", ".img-cont", openContent);
      $(document).unbind("keydown mousewheel DOMMouseScroll");
      
      setTimeout(function() {
        $(".content.cont-"+number).show();
        $(".content.cont-"+number).css("top");
        $(".content.cont-"+number).addClass("visible");
      }, 300);
    }, 300);
  }
  
  function initHandlers() {
    
    $(document).on("mousewheel DOMMouseScroll", function(e) {
      if (!scrolling) {
        if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
          navigateUp();
        } else { 
          navigateDown();
        }
      }
    });

    $(document).on("keydown", function(e) {
      if (!scrolling) {
        if (e.which === 38) {
          navigateUp();
        } else if (e.which === 40) { 
          navigateDown();
        }
      }
    });
    
    $(document).on("click", ".img-cont:not(.active)", openContent);
    
  }
  
  initHandlers();
  
  $(document).on("click", ".close", function() {
    scrolling = true;
    var $content = $(this).parent();
    $content.removeClass("visible");
    setTimeout(function() {
      
      $content.hide();
      $content.css('top');
      $(".img-cont").removeClass("active").addClass("closing");
      
      setTimeout(function() {
        $(".scene").removeClass("active");
        initHandlers();
        
        setTimeout(function() {
          $(".img-cont").removeClass("closing");
          scrolling = false;
        }, 300);
        
      }, 300);
      
    }, 800);
  });
  
}); 

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js