Vertical slider

<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">AWESOME</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>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
//Скрипт js надо подключать здесь
//Автор: Nikolay Talanov. @suez

@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%;
}
.scene.active .heading,
.scene.active .scroll-down,
.scene.active .click-blocks,
.scene.active .pagination {
  opacity: 0;
  z-index: -100;
}
.scene.active .heading {
  transform: translateX(-50%) translateY(-50%) scale(0.5);
}
.scene.active .scroll-down {
  transform: rotate(-90deg) scale(0.5);
}
.scene.active .click-blocks {
  transform: rotate(-90deg) scale(0.5);
}
.scene.active .pagination {
  transform: translateX(-50%) translateY(-50%) scale(0.5);
}
.scene.active .img-cont.active {
  margin-top: -10vh !important;
  width: 50vw;
  height: 100vh;
  transition: margin 0.3s, width 0.3s, height 0.3s;
  z-index: 500;
}
.scene.active .img-cont.active.left {
  margin-left: -50vw;
}
.scene.active .img-cont.active.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;
}
.pagination .page-names {
  text-align: center;
  margin-bottom: 1vh;
  font-size: 1.2vw;
}
.pagination .page-names li {
  display: none;
  will-change: opacity;
  font-family: ptsans-bold;
}
.pagination .page-names li.active {
  display: block;
}
.pagination .page-dots {
  text-align: center;
}
.pagination .page-dots li {
  margin: 0.3vw;
  float: left;
  cursor: pointer;
  color: #cfcfcf;
}
.pagination .page-dots li.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;
}
.img-cont.closing {
  transition: margin 0.3s, width 0.3s, height 0.3s;
}
.img-cont:not(.active) {
  cursor: pointer;
}
.img-cont:not(.active):hover ~ .click-blocks {
  color: #ce2312;
}
.img-cont.left {
  margin-left: calc(-35vw - 50px);
}
.img-cont.right {
  margin-left: 50px;
}
.img-cont.cont-1 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-1.jpg") 50% 50% no-repeat fixed;
}
.img-cont.cont-2 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-2.jpg") 50% 50% no-repeat fixed;
}
.img-cont.cont-3 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-3.jpg") 50% 50% no-repeat fixed;
}
.img-cont.cont-4 {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/2side-pagi-4.jpg") 50% 50% no-repeat fixed;
}
.img-cont.cont-2.left {
  margin-top: -100vh;
}
.img-cont.cont-2.right {
  margin-top: 100vh;
}
.img-cont.cont-3.left {
  margin-top: -200vh;
}
.img-cont.cont-3.right {
  margin-top: 200vh;
}
.img-cont.cont-4.left {
  margin-top: -300vh;
}
.img-cont.cont-4.right {
  margin-top: 300vh;
}
.img-cont.cont-5.left {
  margin-top: -400vh;
}
.img-cont.cont-5.right {
  margin-top: 400vh;
}
.img-cont.cont-6.left {
  margin-top: -500vh;
}
.img-cont.cont-6.right {
  margin-top: 500vh;
}
.img-cont.cont-7.left {
  margin-top: -600vh;
}
.img-cont.cont-7.right {
  margin-top: 600vh;
}
.img-cont.cont-8.left {
  margin-top: -700vh;
}
.img-cont.cont-8.right {
  margin-top: 700vh;
}
.img-cont.cont-9.left {
  margin-top: -800vh;
}
.img-cont.cont-9.right {
  margin-top: 800vh;
}
.img-cont.cont-10.left {
  margin-top: -900vh;
}
.img-cont.cont-10.right {
  margin-top: 900vh;
}

.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;
}
.content.visible {
  opacity: 1;
}
.content.visible .title {
  transform: translateX(0);
}
.content.visible .content-text {
  transform: scale(1);
  opacity: 1;
}
.content.visible .close {
  transform: rotate(45deg);
}
.content .title {
  font-size: 4rem;
  text-transform: uppercase;
  font-family: pfs-medium;
  transition: transform 0.5s 0.1s;
  transform: translateX(-115%);
}
.content .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;
}
.content .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;
}
.content .close:hover {
  color: #FF524C;
}

.check-out {
  position: absolute;
  z-index: 1;
  bottom: 1rem;
  right: 1rem;
  font-family: pfs-regular;
}

$(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);
  });
});